Rich Text Editor Widgets

Widgets functionality provides a way to add UI of any complexity and seamlessly integrate these UIs in Rich Text Editor experiences. The widget could be introduced by the following code:

Copy
rte: {
  getWidgets: () => [
    {
      id: "variable-list-widget",
      label: "My Variables",
      url: "/index.html#/variables",
    },
  ]
}
Copied to your clipboard
rte: {
  getWidgets: () => [
    {
      id: "variable-list-widget",
      label: "My Variables",
      url: "/index.html#/variables",
    },
  ]
}

The code above will add a new My Variables context menu option to the dialog that could be triggered by pressing { key. This option will open a popup window with the content provided by specified url. This URL is relative to the extension, so if your extension is hosted on abc.com domain the result URL will be abc.com/index.html#/variables. On this URL your extension may render the UI of any complexity using the JS framework of your choice.

API Reference

Extension API

Instructions API

Widget window MAY call a connection.host.rte.applyInstructions method and provide RTE instruction to execute:

Last updated 5/11/2023

Was this helpful?

Yes

No