Добавить пользовательскую панель инструментов в TinyMCE после Init - PullRequest
Новая
       20

Добавить пользовательскую панель инструментов в TinyMCE после Init

0 голосов
/ 24 мая 2019

Я знаю, что есть много вопросов о добавлении пользовательских кнопок на панели инструментов, которые у меня уже есть.У нас есть сценарий проверки / демонстрации пользователей, написанный для добавления пользовательских выпадающих меню и кнопок на существующие панели инструментов.Однако, когда мы продемонстрировали его, мы обнаружили, что хотим добавить так много, что для этого потребуется новая панель инструментов.При исследовании пользовательских панелей инструментов мы могли только найти, как добавить дополнительные панели инструментов, являющиеся частью начальной конфигурации, однако мы можем изменять только редактор, так как он загружается и инициализируется сторонним кодом.

Таким образом,вопрос: можем ли мы добавить новую панель инструментов в редактор после ее инициализации?Если да, то, что мы упустили при попытке сделать это?

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, потому что это то, что используется сторонним разработчиком.Для простоты мы написали, чтобы использовать то же самое, когда мы можем загрузить его как часть нашего официального кода.

...