在TinyMCE中初始化后修改工具栏的正确方法

问题描述

我正在使用javascript扩展云托管的LMS。因此，我们可以向页面添加javascript，但不能修改不同组件的供应商javascript。

I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.

LMS经常使用tinyMCE。目标是在每个tinyMCE编辑器的工具栏上添加一个新按钮。

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

问题是，由于tinyMCE模块是在供应商的不可触摸的代码中初始化的，我们不能修改init（）调用。因此，我们无法在init（）对象的toolbar属性中添加任何文本。

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

所以我以适度的hacky方式完成了这个：

So I accomplished this in a moderately hacky 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])
  });
});

所以这样可行，但不用说我不太愿意寻找这样一个特定的位置在DOM中插入按钮。虽然这有效，但我不认为创作者有意这样使用它。

So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.

是否有正确的方法将按钮添加到工具栏中初始化，如果我们不能修改初始化代码？

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

推荐答案

我找到了一个更优雅的解决方案，但它仍然感觉有点像黑客攻击。这是我得到的：

I found a more elegant solution, but it still feels 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\'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);

我觉得应该有比这更好的东西，但我找不到它。

I feel like there should be something better than this, but I didn't find it.

其他注释：

• 丑陋的 _lastRepaintRect 重绘
  方法需要c $ c>，这使得按钮看起来很难看，无论你是否添加了新的
  控件


• 查看了代码，没有办法在没有重新绘制的情况下向
  工具栏添加新控件，没有办法绕过它
  没有丑陋的黑客


• append（b）相当于 add（b）.renderNew（）


• 您可以使用以下代码添加没有黑客的按钮，但是您正在短路许多其他东西：

• the ugly _lastRepaintRect is needed because of the repaintmethod, which makes the buttons look ugly regardless if you add newcontrols or not
• looked in the code, there is no way of adding new controls to thetoolbar without repainting and there is no way to get around itwithout the ugly hack
• append(b) is equivalent to add(b).renderNew()
• you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:

代码：

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

这篇关于在TinyMCE中初始化后修改工具栏的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！