我正在使用
javascript扩展云托管的LMS.因此,我们可以向页面添加javascript,但不能修改不同组件的供应商javascript.
LMS经常使用tinyMCE.目标是在每个tinyMCE编辑器的工具栏上添加一个新按钮.
问题是,由于tinyMCE模块是在供应商的不可触摸的代码中初始化的,我们无法修改init()调用.因此,我们无法将任何文本添加到init()对象的“toolbar”属性中.
所以我以适度的hacky方式完成了这个：
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])
});
});
所以这是有效的,但不用说,我不太愿意在DOM中寻找像插入按钮那样的特定位置.虽然这有效,但我不认为创作者的意图是这样使用它.
如果我们无法修改初始化代码,是否有正确的方法将按钮添加到工具栏中？
解决方法
我找到了一个更优雅的解决方案,但它仍然感觉有点像黑客.这是我得到的：
// 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(' <b>It\'s my second button!</b> ');
}
});
//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);
我觉得应该有比这更好的东西,但我没有找到它.
其他说明：
>由于重绘,需要丑陋的_lastRepaintRect
方法,无论您添加新的按钮,都会使按钮看起来很难看
控制与否
>查看代码,没有办法添加新的控件
工具栏没有重新绘制,没有办法解决它
没有丑陋的黑客
> append(b)相当于add(b).renderNew()
>您可以使用以下代码添加没有黑客的按钮,但您正在短路许多其他东西：
码：
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);