How to add an extra button for a widget to the CK Editor

   —   
If you want to add an extra button to the CK Editor’s toolbar, that allows you to place your own or a default widget as an in-line widget to the editor’s field, you can follow the steps below.
The following example is made for the default Clock widget:

1) Register  a new plugin in the ~\CMSAdminControls\CKeditor\plugins\CMSPlugins\plugin.js file(here you can download the whole plugin.js file: plugin.js):

....
this.pluginInsertPolls(a); this.pluginInsertGroupPolls(a); this.pluginInsertRating(a); this.pluginInsertYouTube(a); this.pluginInsertWidget(a); this.pluginInsertImageOrMedia(a); this.pluginInsertLink(a); this.pluginQuicklyInsertMedia(a); this.pluginForumButtons(a) }, afterInit: function (a) {

    this.pluginClock(a); this.initContextMenu(a); this.initDataProcesor(a); this.initPopupOpener(a);
    this.initDropdownLists(a)
}

    // Insert custom widget plugin
                , pluginClock: function (editor) {
                    var pluginName = 'Clock',
                    // Command
                                insertCommand = {
                                    exec: function (editor) {
                                        url = 'WidgetProperties.aspx?inline=true&isnew=1&widgetname=clock';
                                        CMSPlugin.openWidget(editor, url, 'clock', '715', '550');
                                    }
                                },
                    // Button
                                insertButton = {
                                    label: editor.lang[pluginName].button,
                                    command: pluginName,
                                    icon: editor.config.CMSPluginUrl + 'images/' + pluginName + '.gif'
                                };

                    editor.ui.addButton(pluginName, insertButton);
                    editor.addCommand(pluginName, insertCommand);
                }
    // Insert custom widget plugin
}; CKEDITOR.plugins.add("CMSPlugins", CMSPlugin); CKEDITOR.on("instanceReady", function (a) { if (CKeditor_OnComplete) { CKeditor_OnComplete(a.editor) } }); function CMSModalDialog(b, d, f, o, n, k, p) {
    win = window; var h = o; var m = f; if (f.toString().indexOf("%") != -1) { m = Math.round(screen.width * parseInt(f, 10) / 100) } if (o.toString().indexOf("%") != -1) { h = Math.round(screen.height * parseInt(o, 10) / 100) } var q = navigator.userAgent.toLowerCase(); if (document.all && (navigator.appName != "Opera") && (parseInt(q.match(/msie (\d+)/)[1], 10) < 9) && !p) { if (n == undefined) { n = "resizable: yes; scroll: no;" } var a = true; if (!k) { try { win = wopener.window } catch (l) { a = false } } if (parseInt(navigator.appVersion.substr(22, 1)) < 7) { m += 4; h += 58 } var g = "dialogWidth: " + m + "px; dialogHeight: " + h + "px; " + n; try { win.showModalDialog(b, window, g) } catch (l) { if (a) { window.showModalDialog(b, window, g) } } } else {
        if (n == undefined) { n = "toolbar=no,directories=no,menubar=no,modal=yes,dependent=yes,resizable=yes" } oWindow = win.open(b, d, "width=" + m + ",height=" + h + "," + n); if (oWindow) {
            oWindow.opener = this;
            oWindow.focus()
        }
    }
};

...


2) Modify the ~/CMSAdminControls/CKeditor/plugins/CMSPlugins/lang/en.js file and include custom translation:

Clock: {
        button: 'Insert Clocks',
        title: 'Insert Clocks'
    },


3) Create a new plugin image ~/CMSAdminControls/CKeditor/plugins/CMSPlugins/images/Clock.gif.

4) Register the plugin in the ~/CMSAdminControls/CKeditor/config.js file for your CK Editor toolbar type:

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', '-', 'Iframe', '-'],
        ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'HorizontalRule', 'SpecialChar', '-'],
        ['InsertForms', 'InsertInlineControls', 'InsertPolls', 'InsertRating', 'InsertYouTubeVideo', 'InsertWidget', 'Clock'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor', '-'],
        ['Maximize', 'ShowBlocks']
    ];


5) Finally, please clear browser’s cache and restart the application to apply changes.

Note: if you have upgraded to Kentico 6.0 from an older version, please apply the latest hotfix, at least 6.0.8.
 
-jh-


See also: CK Editor plugin development tutorial

Applies to: Kentico CMS 6.x
Share this article on   LinkedIn Google+