From 3907b85276b46839762f904493b410e7aa58a08c Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Mon, 13 Apr 2026 12:15:24 +1000 Subject: [PATCH 1/2] 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). --- modules/ROOT/pages/creating-a-plugin.adoc | 45 ++++++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/modules/ROOT/pages/creating-a-plugin.adoc b/modules/ROOT/pages/creating-a-plugin.adoc index 82df704005..3cacd4c7dd 100644 --- a/modules/ROOT/pages/creating-a-plugin.adoc +++ b/modules/ROOT/pages/creating-a-plugin.adoc @@ -1,8 +1,8 @@ = Create a plugin for {productname} :navtitle: Create a plugin :description_short: Introducing plugin creation, with an example. -:description: A short introduction to creating plugins for TinyMCE along with an example plugin. -:keywords: plugin, plugin.js, plugin.min.js, tinymce.js +:description: Create custom TinyMCE plugins using PluginManager.add, editor.ui.registry.addButton, and editor.addCommand. Register plugins, add toolbar buttons, and define commands. +:keywords: plugin, plugin.js, plugin.min.js, tinymce.js, PluginManager, addButton, addCommand, custom plugin, toolbar button {productname} is designed to be easily extended by custom plugins; with APIs for registering custom plugins, and creating and localizing custom UI. @@ -45,6 +45,47 @@ tinymce.PluginManager.add('pluginId', (editor, url) => { }); ---- +== Adding a toolbar button to a custom plugin + +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()+`: + +[source,js] +---- +tinymce.PluginManager.add('myplugin', (editor, url) => { + editor.addCommand('myCommand', () => { + editor.insertContent(' Inserted content '); + }); + + editor.ui.registry.addButton('mybutton', { + text: 'My Button', + onAction: () => editor.execCommand('myCommand') + }); + + return { + getMetadata: () => ({ + name: 'My plugin', + url: 'https://example.com/docs' + }) + }; +}); +---- + +Then include the plugin and button in the editor configuration: + +[source,js] +---- +tinymce.init({ + selector: 'textarea', + plugins: 'myplugin', + toolbar: 'mybutton', + external_plugins: { + myplugin: '/path/to/myplugin.js' + } +}); +---- + +For more toolbar button types, see xref:custom-toolbarbuttons.adoc[Toolbar buttons]. + == Using custom plugins with {productname} Custom plugins can be added to a {productname} instance by either: From 434adf04ace4e8e90c3dc35307cb3bbd7b6e3641 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Tue, 14 Apr 2026 08:58:09 +1000 Subject: [PATCH 2/2] Update modules/ROOT/pages/creating-a-plugin.adoc Co-authored-by: Millie --- modules/ROOT/pages/creating-a-plugin.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/creating-a-plugin.adoc b/modules/ROOT/pages/creating-a-plugin.adoc index 3cacd4c7dd..0470f61787 100644 --- a/modules/ROOT/pages/creating-a-plugin.adoc +++ b/modules/ROOT/pages/creating-a-plugin.adoc @@ -1,7 +1,7 @@ = Create a plugin for {productname} :navtitle: Create a plugin :description_short: Introducing plugin creation, with an example. -:description: Create custom TinyMCE plugins using PluginManager.add, editor.ui.registry.addButton, and editor.addCommand. Register plugins, add toolbar buttons, and define commands. +:description: Create custom TinyMCE plugins using PluginManager.add, and expand their functionality with custom toolbar buttons using editor.ui.registry.addButton, custom commands using editor.addCommand, and more. :keywords: plugin, plugin.js, plugin.min.js, tinymce.js, PluginManager, addButton, addCommand, custom plugin, toolbar button {productname} is designed to be easily extended by custom plugins; with APIs for registering custom plugins, and creating and localizing custom UI.