CKEditor : How to enable custom plugin button when in "Source" mode

Question

I have successfully integrated CKEditor into my project and have just built my first "Hello, world!" type plugin. The plugin works great in "wysiwyg" mode, but as soon as switch to "Source" mode, the plugin becomes automagically disabled.

No amount of coercion on my part has been able to keep the plugin button enabled. I know this is possible because by default, the "Select All" and "About" toolbar buttons in CKEditor are enabled for both wysiwyg and source modes.

I've seen references to a "modes" setting for toolbar items, but have been unable to uncover the required syntax. Here's an unsuccessful example of what I've tried by editing my own customConfig file:

config.toolbar = [
    { name: 'custom', items: ['HelloWorld'], modes: { wysiwyg: 1, source: 1 } },
    { name: 'about', items: ['About'] }
];

This doesn't work either:

config.toolbarGroups = [
    { name: 'custom', modes: { wysiwyg: 1, source: 1 } },
    { name: 'about' }
];

How can I make a CKEditor plugin toolbar button enabled for both modes?

Armchair Bronco Armchair Bronco · Accepted Answer · 2013-12-10T18:49:57

Got it. Through trial & error I found some syntax that works.

There may be other ways to do this, but this is what worked for me:

config-text.js

CKEDITOR.editorConfig = function (config) {
    config.toolbar = [
        { name: 'custom', items: ['HelloWorld'] },
        { name: 'about', items: ['About'] }
    ];

    config.toolbarGroups = [
        { name: 'custom' },
        { name: 'about' }
    ];
};

plugin.js

CKEDITOR.plugins.add("helloworld", {
    init: function (editor) {
        editor.addCommand("helloWorld",
            {
                // Enable the button for both 'wysiwyg' and 'source' modes
                modes: { wysiwyg: 1, source: 1 },
                exec: function (editor) {
                    alert("Hello, world!");
                }
            });
        editor.ui.addButton("HelloWorld", {
            label: "Hello World",
            command: "helloWorld",
            icon: this.path + "images/helloworld.png"
        });
    }
});

CKEditor : How to enable custom plugin button when in "Source" mode

2 Answers