I use TinyMce 5 version with vue.js 2. I have like this options in my case:
editorOptions: {
height: this.height,
menubar: false,
forced_root_block : false,
plugins: [
'advlist lists image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime link table paste code help wordcount stylebuttons'
],
color_map: [
"32D7A0", "Green",
"B4BDC4", "Gray",
"FFFFFF", "White",
],
custom_colors: false,
language: 'ru',
toolbar_sticky: true,
autosave_ask_before_unload: true,
content_style: '.text-green { color: #32D7A0; } ' +
'.text-white { color: #ffffff; } ' +
'.center { text-align: center; } ',
toolbar: this.toolbar,
setup: function (edt) {
window.tinymce.PluginManager.add('stylebuttons', function(editor) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
editor.ui.registry.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function() {
var self = this, setup = function() {
editor.formatter.formatChanged(name, function(state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
},
}
Here I tried register stylebuttons plugin which add some buttons. But currently added buttons not shows in toolbar. How I can correctly add buttons in plugin?