1

I'm attempting to add buttons to a CKEditor using a Chrome extension. Specifically, I'm trying to modify the CKEditor in MailChimp.com's template editor. And to be clear, my issue less about how to do it via a Chrome extension, and more about how to do it after the CKEditor has already been instanced.

When I'm on MailChimp's editor page and I type editor into the console I can see that it's been used to create the CKeditor on the page. Unfortunately, I'm having trouble using the code in the CKEditor documentation to add buttons after the fact. Some things like editor.destroy() work, but that doesn't really help me. I'm not interested in destroying MailChimp's toolbar and creating one from scratch, I just want to add to it.

My code is being run in the page context, not as a content script. Here is the code from my content script that I used to enable this:

injectScript( chrome.extension.getURL('/js/mailchimp_injected_template-editor.js'), 'body');

It injects a script file into the body of the page so that I can access the variables set by MailChimp's code. Here is the code from the injected script. I tried using this code below that I got from this answer: 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' ] },
    ];
});

Both of these functions fire exactly when I expect them too. Sadly, the code within them has no effect on the page. I've swapped it out for code I've found on CKeditors documentation page as well as from other answers in the question I linked above. It all either throws an error or fails to do anything at all.

Here's an example of some other code I tried, which is more relevant than the stuff above. This would should actually do what I want. Create a command and then add a button to the toolbar that fires that command.

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

Any tips would be greatly appreciated!

Community
  • 1
  • 1
jkupczak
  • 2,891
  • 8
  • 33
  • 55
  • Unfortunately the toolbar API was designed to be static, and I think you won't be able to do too much without extreme JS hacking. – Marek Lewandowski Mar 23 '17 at 17:09
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. – Makyen Mar 23 '17 at 18:48
  • Are you running this code in the page context? It's likely that data structures which CKeditor uses to hold which buttons to show are in a JavaScript variable/Object, not in the DOM. If so, the code you use to change it needs to [run in the page context](http://stackoverflow.com/q/9515704/3773011), not your content script context. – Makyen Mar 23 '17 at 18:52
  • @Makyen Yes, I am running my code in the page context. Updated my question to reflect this. – jkupczak Mar 23 '17 at 21:26

0 Answers0