The correct way to change the toolbar after launching in TinyMCE

Question

I am expanding LMS with a cloud site using javascript. Thus, we can add javascript to the page, but we cannot change the javascript of the provider for different components.

LMS often uses tinyMCE. The goal is to add a new button to the toolbar of each tinyMCE editor.

The problem is that since tinyMCE modules are initialized in the vendor's untouchable code, we cannot change the init () call. Therefore, we cannot add text to the "toolbar" property of the init () object.

So, I did it in a moderately hacked way:

tinyMCE.on('AddEditor', function(e){ e.editor.on('init', function(){ tinyMCE.ui.Factory.create({ type: 'button', icon: 'icon' }).on('click', function(){ // button pressing logic }) .renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0]) }); }); 

So this works, but, of course, it’s not very convenient for me to look for such a specific place in the DOM to insert this button. Although this works, I don’t think it was the creator’s intention to use it that way.

Is there a way to add a button to the toolbar after initialization if we cannot change the initialization code?

Answer 1

I found a more elegant solution, but it still looks a bit like a hack. Here is what I got:

 // get an instance of the editor var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever //add a button to the editor buttons editor.addButton('mysecondbutton', { text: 'My second button', icon: false, onclick: function () { editor.insertContent('&nbsp;<b>It\ my second button!</b>&nbsp;'); } }); //the button now becomes var button=editor.buttons['mysecondbutton']; //find the buttongroup in the toolbar found in the panel of the theme var bg=editor.theme.panel.find('toolbar buttongroup')[0]; //without this, the buttons look weird after that bg._lastRepaintRect=bg._layoutRect; //append the button to the group bg.append(button); 

I feel that there must be something better than this, but I have not found it.

Other notes:

• ugly _lastRepaintRect needed because of the repaint method, which makes the buttons look ugly, whether you add new controls or not
• looked at the code, there is no way to add new controls to the toolbar without repainting, and there is no way to get around it without an ugly hack
• append(b) equivalent to add(b).renderNew()
• you can use the following code to add a button without hacking, but you are briefly bypassed by many other things:

code:

 bg.add(button); var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0]; var bgElement=bg.getEl('body'); buttonElement.renderTo(bgElement);