Skip to content

Commit 3907b85

Browse files
committed
DOC-3391: Add addButton and addCommand example to creating-a-plugin
Add toolbar button section showing PluginManager.add with editor.ui.registry.addButton and editor.addCommand to address Context7 benchmark Q9 (15/100).
1 parent 02966c5 commit 3907b85

1 file changed

Lines changed: 43 additions & 2 deletions

File tree

modules/ROOT/pages/creating-a-plugin.adoc

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
= Create a plugin for {productname}
22
:navtitle: Create a plugin
33
: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
66

77
{productname} is designed to be easily extended by custom plugins; with APIs for registering custom plugins, and creating and localizing custom UI.
88

@@ -45,6 +45,47 @@ tinymce.PluginManager.add('pluginId', (editor, url) => {
4545
});
4646
----
4747

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('&nbsp;<strong>Inserted content</strong>&nbsp;');
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+
4889
== Using custom plugins with {productname}
4990

5091
Custom plugins can be added to a {productname} instance by either:

0 commit comments

Comments
 (0)