Właściwy sposób modyfikowania paska narzędzi po inicjacji w TinyMCE

Question

Rozszerzam hostowaną chmurę LMS na javascript. Dlatego możemy dodać javascript do strony, ale nie możemy zmodyfikować javascript dostawcy dla różnych składników.

LMS często używa tinyMCE. Celem jest dodanie nowego przycisku do paska narzędzi każdego edytora tinyMCE.

Problem polega na tym, że ponieważ moduły tinyMCE są inicjowane w nietykalnym kodzie dostawcy, nie możemy zmodyfikować wywołania init(). Dlatego nie możemy dodać żadnego tekstu do właściwości "toolbar" obiektu init().

Więc dokonał tego w umiarkowanie hacky sposób:

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]) 
    }); 
}); 

Tak to działa, ale trzeba powiedzieć, że nie jestem całkowicie wygodne konieczności zaglądania do tego konkretnego miejsca w DOM tak, aby wstawić przycisk. Chociaż to działa, nie sądzę, że intencją twórcy było, aby był on używany w ten sposób.

Czy istnieje właściwy sposób dodania przycisku do paska narzędzi po inicjalizacji, jeśli nie można zmodyfikować kodu inicjującego?

Answer 1

Znalazłem bardziej eleganckie rozwiązanie, ale nadal wydaje się trochę jak hack. Oto, co otrzymałem:

// 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\'s 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); 

Czuję, że powinno być coś lepszego niż to, ale nie znalazłem.

Inne uwagi:

• brzydkie _lastRepaintRect jest potrzebna ze względu na metodę repaint , co sprawia, przyciski wyglądają brzydko niezależnie jeśli dodać nowe kontroli lub nie
• spojrzał w kodzie, nie ma nie ma możliwości dodawania nowych elementów sterujących do paska narzędziowego bez malowania i nie ma sposobu na obejście go bez użycia brzydkiego haka
• append(b) jest odpowiednikiem add(b).renderNew()
• można użyć poniższy kod, aby dodać przycisk bez hack, ale są shortcircuiting wiele innych rzeczy:

Kod:

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);