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.