|
1 | 1 | = Create a plugin for {productname} |
2 | 2 | :navtitle: Create a plugin |
3 | 3 | :description_short: Introducing plugin creation, with an example. |
4 | | -:description: A short introduction to creating plugins for TinyMCE along with an example plugin. |
5 | | -:keywords: plugin, plugin.js, plugin.min.js, tinymce.js |
| 4 | +:description: Create custom TinyMCE plugins using PluginManager.add, editor.ui.registry.addButton, and editor.addCommand. Register plugins, add toolbar buttons, and define commands. |
| 5 | +:keywords: plugin, plugin.js, plugin.min.js, tinymce.js, PluginManager, addButton, addCommand, custom plugin, toolbar button |
6 | 6 |
|
7 | 7 | {productname} is designed to be easily extended by custom plugins; with APIs for registering custom plugins, and creating and localizing custom UI. |
8 | 8 |
|
@@ -45,6 +45,47 @@ tinymce.PluginManager.add('pluginId', (editor, url) => { |
45 | 45 | }); |
46 | 46 | ---- |
47 | 47 |
|
| 48 | +== Adding a toolbar button to a custom plugin |
| 49 | + |
| 50 | +Use `+editor.ui.registry.addButton+` to add a toolbar button and `+editor.addCommand+` to define the action. Register both inside the plugin callback passed to `+PluginManager.add()+`: |
| 51 | + |
| 52 | +[source,js] |
| 53 | +---- |
| 54 | +tinymce.PluginManager.add('myplugin', (editor, url) => { |
| 55 | + editor.addCommand('myCommand', () => { |
| 56 | + editor.insertContent(' <strong>Inserted content</strong> '); |
| 57 | + }); |
| 58 | +
|
| 59 | + editor.ui.registry.addButton('mybutton', { |
| 60 | + text: 'My Button', |
| 61 | + onAction: () => editor.execCommand('myCommand') |
| 62 | + }); |
| 63 | +
|
| 64 | + return { |
| 65 | + getMetadata: () => ({ |
| 66 | + name: 'My plugin', |
| 67 | + url: 'https://example.com/docs' |
| 68 | + }) |
| 69 | + }; |
| 70 | +}); |
| 71 | +---- |
| 72 | + |
| 73 | +Then include the plugin and button in the editor configuration: |
| 74 | + |
| 75 | +[source,js] |
| 76 | +---- |
| 77 | +tinymce.init({ |
| 78 | + selector: 'textarea', |
| 79 | + plugins: 'myplugin', |
| 80 | + toolbar: 'mybutton', |
| 81 | + external_plugins: { |
| 82 | + myplugin: '/path/to/myplugin.js' |
| 83 | + } |
| 84 | +}); |
| 85 | +---- |
| 86 | + |
| 87 | +For more toolbar button types, see xref:custom-toolbarbuttons.adoc[Toolbar buttons]. |
| 88 | + |
48 | 89 | == Using custom plugins with {productname} |
49 | 90 |
|
50 | 91 | Custom plugins can be added to a {productname} instance by either: |
|
0 commit comments