tinymce editor custom function plugin
Including how to add icons to the toolbar of the tinymce editor and implement custom functions, (PS: The editor I use is version 5.x, and the plug-in file for version 6.x may be plugin.min.js, but the principle is the same )
Custom plugin process
Write plugin file plugin
First of all, you need to add your custom plugin file in the plugins folder in the folder where you introduced tinymce. For example, you are like me, and you import tinymce under the public folder. The file structure is as follows
Then open your plugins folder, the content inside is your tinymce function plug-in, you can add a folder named custom, which is our custom plug-in.
Create a new plugin.js file in the custom folder, and write our plugin logic in it, such as
;(function () {<!-- -->
tinymce.PluginManager.add('custom_plugin', function (editor) {<!-- -->
// add your plugin logic here
editor.ui.registry.addButton('custom_button', {<!-- -->
text: 'custom_button',
// icon: '',
tooltip: 'custom',
onAction: function () {<!-- -->
window.alert('custom plugin')
},
})
})
})()
Register your custom plugin
The previous article on how tinymce loads plug-ins has been introduced. There is one thing to note here. If you copy the tinymce folder in the npm package to the public folder and refer to it like me, then when referencing it in your page, The path of tinymce.baseURL needs to be specified, otherwise the plugin cannot be loaded, and the plugins on the page are all built into the core editor.
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
... //Omit a lot of code in the middle of vue
export default {<!-- -->
created() {<!-- -->
tinymce.baseURL = 'tinymce'
},
}
Friends who will not introduce tinymce please click on my other article: Vue introduces tinymce tutorial
Okay, let’s get back to business, when we initialize the editor, we introduce the plug-in we wrote before, as follows
tinymce.init({<!-- -->
selector: 'textarea', // select your textarea element
plugins: 'custom_plugin', // your plugin name
toolbar: 'custom_button', // add your button to the toolbar
// Additional initialization options...
});
What needs to be noted here is that the name of your plugin folder is filled in the plugins attribute, and the method registered in your plugin is filled in the toolbar. The effect is as follows,
Optimize icon
Of course, you don’t want to just use text to click, you want icons instead, and it’s easy to use custom icons.
The tinymce/icons/default/icons.js file in the public folder stores all the icons used in tinymce
Add your icon to icons.js. It is recommended to use svg code. The icons in the Alibaba Vector Icon Library can meet 99.99% of the needs. The link is here: Alibaba Vector Icon Library
tinymce.IconManager.add('default', {<!-- -->
icons: {<!-- -->
'custom-button':
'<svg t="1690962765928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3494" width="24" height="24"><path d="M1009.992 464.055c-6.551-6.944-18.336-15.222-37.281-15.222l-49.371 0c-38.996-25.66-120.146-79.334-133. 599-89.515- 11.267-8.528-18.037-15.434-20.123-20.527-1.656-4.044-1.621-10.133-1.405-21.439 0.065-3.444 0.14-7.348 0.14-11.519 0-62.28 7-42.817-102.91-50.405-109.618-6.619-6.281-69.046- 65.429-99.237-90.858-36.233-30.516-78.03-39.091-82.678-39.968-1.957-0.37-3.944-0.556-5.937-0.556l-207 0c-47.593 0-81.063 32.921-89.606 42.268L9.148 304.64l-0.389- 0.056c-0.209 1.445-5.091 35.838-2.612 75.772 3.679 59.291 21.385 100.722 52.625 123.142 38.728 27.793 63.563 91.347 69.85 2 113.441 3.922 13.951 16.632 23.343 30.78 23.342 1.419 0 2.854-0.095 4.294-0.289 6.367-0.857 63.158-9.331 96.358-42.532 40 .682-40.681 116.825 -177.352 125.373-192.802l-55.999-30.985c-22.023 39.797-85.546 149.45-114.629 178.532-8.286 8.287-22.122 14.338-34.708 18.3 69-3.126-7.871-6.994-16.877-11.632-26.421-20.155-41.479-44.506-72.651- 72.375-92.652-14.304-10.265-23.537-36.589-26-74.123-1.002-15.274-0.677-29.789-0.025-41.099l207.183-182.431c1.268-1.117 2. 124-1.947 3.188-3.234 5.468-6.17 23.464-21.782 42.665 -21.782l203.4 0c7.638 1.93 31.333 8.924 50.985 25.476 29.77 25.071 96.204 88.133 96.872 88.767 0.503 0.478 1.021 0.939 1.5 55 1.383 0.284 0.237 28.444 24.723 28.444 61.374 0 3.562-0.065 6.987-0.128 10.3-0.285 14.963-0.58 30.436 6.169 46.914 6.764 16.516 19.323 31.104 40.723 47.302 18.784 14.217 132.207 88.775 145.078 97.23 5.218 3.428 11.325 5.254 17.568 5.254l45.725 0 0 55.486-1 18.379 115.162c-0.723 0.704-0.585 0.491-1.022 1.011-2.803 2.556-22.901 19.341-66.99 19.341l-327.156 0c-11.386- 0.487-53.997 1.231-100.804 48.039-20.792 20.791-199.636 208.854-207.239 216.85l46.379 44.103c1.856-1.953 185.888-195.471 206.115-215.698 27.152-27.153 48.025-29.224 51.947-29.365 1.254 0.214 1.035 0.071 2.758 0.071l328 0c71.04 0 106.152-31.842 112.987-38.815l127.718-124.248c6.193-6.024 9.687-14.297 9.687-22.937l0-81.681C1023.647 493.763 1022.647 477.47 1009.992 464.055zM959.501 498.675c0.007-0.35 0.025-0.662 0.041-0.932C959 0-31.536 13.431-31.536 29.999l0 67.497c0 16.568 14.119 29.999 31.536 29.999C626.381 447.486 640.5 434.055 640.5 417.487 z" fill="#272636" p-id="3495"></path></svg>',
},
})
Here I used a puppy icon, named ‘custom-button’, and then referenced in the icon attribute in the plugin
;(function () {<!-- -->
tinymce.PluginManager.add('custom_plugin', function (editor) {<!-- -->
// add your plugin logic here
editor.ui.registry.addButton('custom_button', {<!-- -->
text: 'custom_button',
icon: 'custom-button', // custom icon
tooltip: 'custom',
onAction: function () {<!-- -->
window.alert('custom plugin')
},
})
})
})()
The effect is as follows
Summary
There are many plug-ins in tinymce that are charged, but they support custom development. As long as you have the technology, you don’t have to spend money. Recently, a comment function has been made, which can add comments in the editor, insert comment icons, record comment id and content, and side While displaying the comment area, the content of the comment area can be edited and replied, and I will introduce it in the next article.
It’s all original, support and praise