Я пытаюсь добавить кнопки в CKEditor, используя расширение Chrome. В частности, я пытаюсь изменить CKEditor в редакторе шаблонов MailChimp.com. И чтобы было ясно, моя проблема не столько в том, как это сделать через расширение Chrome, сколько в том, как это сделать после того, как CKEditor уже был создан.
Когда я нахожусь на странице редактора MailChimp и набираю editor в консоли, я вижу, что он использовался для создания CKeditor на странице. К сожалению, у меня возникли проблемы с использованием кода в документации CKEditor для добавления кнопок постфактум. Некоторые вещи вроде editor.destroy() работают, но мне это не особо помогает. Я не заинтересован в уничтожении панели инструментов MailChimp и создании ее с нуля, я просто хочу добавить к ней что-то новое.
Мой код запускается в контексте страницы, а не как сценарий содержимого. Вот код из моего скрипта контента, который я использовал для включения этого:
injectScript( chrome.extension.getURL('/js/mailchimp_injected_template-editor.js'), 'body');
Он вставляет файл сценария в body страницы, чтобы я мог получить доступ к переменным, установленным кодом MailChimp. Вот код из внедренного скрипта. Я попытался использовать этот код ниже, который я получил из этого ответа: https://stackoverflow.com/a/37432348/556079
CKEDITOR.on('instanceCreated', function(event) {
var editor = event.editor;
editor.config.toolbar = [
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
]; // could be from synchronous!!! XHR as well
});
CKEDITOR.on('instanceReady', function(event) {
var editor = event.editor;
editor.config.toolbar = [
{ name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
];
});
Обе эти функции срабатывают именно тогда, когда я их ожидаю. К сожалению, код внутри них не влияет на страницу. Я заменил его на код, который нашел на странице документации CKeditors, а также на другие ответы на вопрос, на который я ссылался выше. Все это либо выдает ошибку, либо вообще ничего не делает.
Вот пример другого кода, который я пробовал, который более актуален, чем вышеприведенный. На самом деле это должно делать то, что я хочу. Создайте команду, а затем добавьте на панель инструментов кнопку, запускающую эту команду.
editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
Любые советы будут очень признательны!
