Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 43 additions & 2 deletions modules/ROOT/pages/creating-a-plugin.adoc
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels a little odd

Suggested change
: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.

Expand Down Expand Up @@ -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('&nbsp;<strong>Inserted content</strong>&nbsp;');
});

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:
Expand Down
Loading