Question

我尝试使用Chrome扩展程序向CKEditor添加按钮。具体来说，我试图在MailChimp.com的模板编辑器中修改CKEditor。要明确的是，我的问题不是关于如何通过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'
});

任何提示都将不胜感激！

如何在实例化后修改CKEditor工具栏？

0 个答案: