我正在使用 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
需要因为repaint
方法,这使得按钮看起来很难看,无论你是否添加新的
控制或不控制
- 查看代码,无法向其中添加新控件
工具栏无需重新绘制,并且没有办法绕过它
没有丑陋的黑客
-
append(b)
相当于add(b).renderNew()
- 您可以使用以下代码来添加按钮而无需破解,但您会短路许多其他内容:
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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)