Custom buttons on CKEditor

Jay McCormack asked on June 20, 2014 00:02

I'm looking for some information on how to add custom buttons to the CKEditor interface. Ideally I want to add a drop down list of values, or something that calls a javascript popup that then interacts with the editor.

Any suggestions?

Recent Answers


Vilém Jeniš answered on June 20, 2014 01:13 (last edited on June 20, 2014 01:14)

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.

0 votesVote for this answer Mark as a Correct answer

Jay McCormack answered on June 20, 2014 01:25

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?

1 votesVote for this answer Mark as a Correct answer

Michael Kinkaid answered on June 22, 2014 12:26

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.

0 votesVote for this answer Mark as a Correct answer

Vilém Jeniš answered on June 23, 2014 04:41 (last edited on June 23, 2014 07:32)

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.

0 votesVote for this answer Mark as a Correct answer

Michael Kinkaid answered on June 23, 2014 11:36

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

0 votesVote for this answer Mark as a Correct answer

Michael Kinkaid answered on June 24, 2014 17:36

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 :-)

0 votesVote for this answer Mark as a Correct answer

Michael Kinkaid answered on June 25, 2014 14:18

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");
1 votesVote for this answer Mark as a Correct answer

Jay McCormack answered on June 30, 2014 19:08

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

this.pluginAbbr(a);

Where should it be placed?

0 votesVote for this answer Mark as a Correct answer

Brendon McCarthy answered on August 4, 2014 22:27

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?

0 votesVote for this answer Mark as a Correct answer

Michael Kinkaid answered on March 14, 2016 15:12

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 */
0 votesVote for this answer Mark as a Correct answer

Noam Rinat answered on August 22, 2016 21:08

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']

];
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.