在Init之后将自定义工具栏添加到TinyMCE

Question

我知道有很多关于向工具栏添加自定义按钮的问题，我已经知道了。 我们编写了一个概念验证/演示用户脚​​本，用于向现有工具栏添加自定义下拉列表和按钮。 然而，当演示它时，我们发现我们想添加这么多，我们需要一个新的工具栏才能这样做。 在研究自定义工具栏时，我们只能找到如何添加其他工具栏是初始配置的一部分，但是，我们只能修改编辑器，因为它是由第三方代码加载和初始化的。

因此，问题是： 我们可以在编辑器初始化后添加新的工具栏吗？ 如果是这样，我们在试图这样做时错过了什么？

TinyMCE是v4，我们目前正在使用以下代码来实现上述功能：

// ==UserScript==
// @name          Canvas RCE Custom Droplist
// @include       /^https?:\/\/([^\.]*\.)?instructure\.com\/.*$/
// @exclude       /^https?:\/\/([^\.]*\.)?instructure\.com\/((courses|users)\/\d+\/)?files.*$/
// @exclude       /^https?:\/\/quiz-lti-iad-prod.instructure\.com\/.*$/
// @exclude       /^https?:\/\/([^\.]*\.)?instructure\.com\/login.*$/
// @exclude       /^https?:\/\/([^\.]*\.)?instructure\.com\/api\/v1.*$/
// @require       https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @version       0.0.1
// ==/UserScript==

(function() {
    var jQ = jQuery.noConflict();
    var i = 0;

    var wait = setInterval(function() {
        if(typeof tinyMCE !== "undefined" && tinyMCE.editors.length > 0) {
            // Add global CSS to editor
            var customCSS = [];
            jQ("link[href*='account_'][href*='.css']").each(function() {
                console.log('Adding CSS to TinyMCE: ' + jQ(this).attr('href'));
                tinyMCE.activeEditor.dom.loadCSS(jQ(this).attr('href'));
            });

            // Add custom listbox to editor
            var listbox = tinyMCE.ui.Factory.create({
                type: 'listbox',
                text: 'Classes',
                icon: false,
                onselect: function(e) {
                    if(tinyMCE.activeEditor.selection.getContent() == '') {
                        tinyMCE.activeEditor.dom.setAttrib(tinyMCE.activeEditor.selection.getNode(), 'class', this.value());
                    } else {
                        tinyMCE.activeEditor.execCommand('insertHTML', false, '<span class="' + this.value() + '">' + tinyMCE.activeEditor.selection.getContent() + '</span>');
                    }
                },
                values: [
                    {
                        text: '.title',
                        textStyle: 'color: #104b86; font-weight: 700;',
                        value: 'title'
                    },
                    {
                        text: '.subtitle',
                        textStyle: 'color: #4b77a4; font-weight: 700;',
                        value: 'subtitle'
                    },
                    {
                        text: '.important',
                        textStyle: 'color: #ff0000;',
                        value: 'important'
                    }
                ]
            });
            tinyMCE.activeEditor.theme.panel.find('toolbar buttongroup')[0].append(listbox);

            clearInterval(wait);
        }
        if(i++ >= 30) {
            clearInterval(wait);
        }
        console.log(i);
    }, 500);
})();

注意 ：用户脚本使用的是jQuery 1.7.2，因为这是第三方使用的。 为方便起见，我们将其编写为使用相同的内容，以便我们可以将其作为官方代码的一部分加载。