Custom buttons on CKEditor

Hi Jay!

What you're trying to do is to add a plugin. Here is a simple guide to help you do that. If your plugin doesn't load perhaps this could help.

Also: There is a different version of CK editor in Kentico 7 and Kentico 8 and each version might require a different approach. But in general both versions support adding plugins and each plugin can add controls into the editor tool bar.

I hope this helps.

Hi

So I did actually go through the doco on the ckeditor site - created the plug in etc. I added the config.extraplugins call in the config.js file in the kentico file system and then added my 'abbr' reference into the standard toolbar.

I also enabled the custom toolbars setting in web.config. Cleared my cache a few times, still no luck.

Does anyone know of a guide to do this with Kentico?

Hi Jay. I have a ticket with support on the very same thing (want to be able to use plugins, want to integrate with UI personalization, don't want to have to beat up CMSPlugins object if I can avoid that). I'll let you know if a solution pops up. Likewise if you happen upon a solution it would be great if you could elaborate here.

Well... You are right.

There's this guide that describes the procedure needed to add a custom toolbar into our CKEditor. BUT! There is a slight change for newer versions. The Javascript file has been re-minified and thus variable names have changed. However the pattern is clear. You need to modify the plugin.js file in CMSPlugin folder in the CK editors' folder. You add the plugin initialization logic and at the end of the file you call the initialization method.

It's not the simpliest, but we are aware of that. Please feel free to use this portal to provide us with your feedback.

Yup. Followed the guide and got the Abbreviation plugin added in (just playing around with http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1).

In CMSPlugins object in plugin.js

    // Insert Abbr
pluginAbbr: function (editor) {

    editor.addCommand('abbrDialog', new CKEDITOR.dialogCommand('abbrDialog'));
    editor.ui.addButton('Abbr', {
        label: 'Insert Abbreviation',
        command: 'abbrDialog',
        toolbar: 'insert',
        icon: editor.config.CMSPluginUrl + "images/Abbr.png"
    });

    CKEDITOR.dialog.add('abbrDialog', function (editor) {
        return {
            title: 'Abbreviation Properties',
            minWidth: 400,
            minHeight: 200,
            contents: [
                {
                    id: 'tab-basic',
                    label: 'Basic Settings',
                    elements: [
                        {
                            type: 'text',
                            id: 'abbr',
                            label: 'Abbreviation',
                            validate: CKEDITOR.dialog.validate.notEmpty("Abbreviation field cannot be empty")
                        },
                        {
                            type: 'text',
                            id: 'title',
                            label: 'Explanation',
                            validate: CKEDITOR.dialog.validate.notEmpty("Explanation field cannot be empty")
                        }
                    ]
                },
                {
                    id: 'tab-adv',
                    label: 'Advanced Settings',
                    elements: [
                        {
                            type: 'text',
                            id: 'id',
                            label: 'Id'
                        }
                    ]
                }
            ],
            onOk: function () {
                var dialog = this;

                var abbr = editor.document.createElement('abbr');
                abbr.setAttribute('title', dialog.getValueOf('tab-basic', 'title'));
                abbr.setText(dialog.getValueOf('tab-basic', 'abbr'));

                var id = dialog.getValueOf('tab-adv', 'id');
                if (id)
                    abbr.setAttribute('id', id);

                editor.insertElement(abbr);
            }
        };
    });        
},

Then in afterInit() add in a call to your pluginAbbr();

this.pluginAbbr(a);

Then add the plugin into config.js toolbar configuration (see 'Abbr'):

    config.toolbar_Full = config.toolbar_Default =
[
    ['Source', '-'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'SpellChecker', 'Scayt', '-'],
    ['Undo', 'Redo', 'Find', 'Replace', 'RemoveFormat', '-'],
    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    ['InsertLink', 'Unlink', 'Anchor', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'],
    ['InsertForms', 'InsertPolls', 'InsertRating', 'InsertYouTubeVideo', 'InsertWidget', '-'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor', '-'],
    ['InsertMacro', '-'],
    ['Maximize', 'ShowBlocks'],
    ['Abbr']
];

Haven't played with UI Personalization yet but will try that next. MK

Also if you check the page you'll see that there is a JS script registered (likely from the compiled server control that registers a replace function that overwrites the extraPlugins property to be 'CMSPlugins'.

function CKReplace(id, config) {
if (CKEDITOR && CKEDITOR.instances) {
    var instance = CKEDITOR.instances[id];
    if (instance) {
        config = config || instance.config;
        try {
            instance.destroy();
        } catch(e) { }
    }
    var t = document.getElementById(id);
    if (t) {
        CKEDITOR.replace(id, config);
        CKEDITOR.instances[id].on('blur', function() {{ this.updateElement(); }});
    }
  }
}

This is then called for each control:

CKReplace('p_lt_ctl06_wP_p_lt_ctl00_wT_ucEditableText_htmlValue',{ extraPlugins: 'CMSPlugins', etc });

Options: Do everything in CMSPlugins - easier said than done for complex plugins i.e. http://www.loopindex.com/lite/demo/. Call CKReplace another time with your own setup? Buy a source code license :-)

Sorted. Clone ~/CMSFormControls/Basic/HtmlAreaControl.ascx. In Page_Load just add and remove plugins as required using the following:

//remove a plugin
editor.RemovePlugins.Add("CMSPlugins");

//add a plugin
editor.ExtraPlugins.Add("lite");

Thanks for your assistance on this. @Michael - when you say to add this

this.pluginAbbr(a);

Where should it be placed?

I'm running into the same issue, but not for a custom plugin I'm building. Rather, I wish to add a couple of plugins from the CKEditor plugin library. One in particular is http://ckeditor.com/addon/codemirror. What is the easiest way to do this without modifying CMSPlugins/plugin.js.

@Michael, would your solution work be the most optimal?

Been back into this with Kentico 9. Here is a far simpler approach. Install the plugin as usual then modify CMS/CMSAdminControls/CKeditor/config.js to append these to the plugin configuration with:

config.plugins += ',someplugin,someplugin';

Sticking this near the top e.g.

CKEDITOR.editorConfig = function (config) {
   config.allowedContent = true; // To disable CKEditor ACF
   config.dialog_backgroundCoverColor = '#888888';
   config.skin = 'moono';
   config.enterMode = CKEDITOR.ENTER_P;
   config.shiftEnterMode = CKEDITOR.ENTER_BR;
   config.entities_latin = false;


   /* CMS */
   config.plugins += ',showborders,templates';
   /* CMS end */

Follow Michael Kinkaid's instructions on how to add the plug-in. In order to add the plug-in's buttons you will need to have them added to the toolbar at the CKEditor/config.js. For example, this is how I added th "Lite" plugin's buttons to the Default toolbar:

config.toolbar_Standard = config.toolbar_Default =
[
    [sourceName, '-'],      
    ['Undo', 'Redo', '-'], 
    ['Bold', 'Italic', 'Underline', 'TextColor', '-'],
     ['Styles', 'Format', 'Font', 'FontSize'],
    ['NumberedList', 'BulletedList', 'Outdent', 'Indent', '-'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-'],
    ['InsertLink', 'Unlink', '-'],
    ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'InsertWidget', 'InsertMacro', '-'],
['lite-toggletracking', 'lite-toggleshow', 'lite-acceptall', 'lite-rejectall', 'lite-acceptone', 'lite-rejectone', '-'],
    ['Maximize']

];