tommed

CKEditor is a fantastic open-source WYSIWYG editor. However, it is unfortunately quite difficult to extend as there is very little documentation ready for CKEditor (the available stuff is for the older version: FCKEditor, which is very different).

But fear not my fellow readers; for I have managed to figure out how to create an iframe-based plugin (perfect if you want to use your old dialog-based fckeditor plugins in ckeditor)!!

The first step is to add your plugin into the toolbar settings. In the example below, my new plugin is called uploader and will be a replacement for the rubbish image uploader that comes with ckeditor:

ckeditor/config.js

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';

	config.toolbar = 'MyToolbarSet'

	config.toolbar_MyToolbarSet =
	[
	    ['Cut','Copy','Paste','PasteFromWord','-','SpellChecker'],
	    ['Undo','Redo','-','Find','Replace'],
	    ['NumberedList','BulletedList','Outdent','Indent','Blockquote','RemoveFormat','Source'],
	    ['Link','Unlink'],
	    ['uploader','Table','HorizontalRule','SpecialChar'],
	    '/',
	    ['Bold','Italic','StrikeThrough','-','Subscript','Superscript'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Format','FontSize'],
	    ['FitWindow','ShowBlocks']
	]
};

As you can see, I have placed my ‘uploader’ plugin next to the ‘Table’ button.

The next stage is to create a folder for you plugin. This folder needs to be called the same as the plugin name (in this instance we must call it ‘uploader’). You will then need a file called plugin.js inside this folder and a folder called dialogs, where all your dialog pages go.

For this example we will reference a dialog page called upload.html, which also requries a script file called upload.js. I have also added a PNG icon which will appear on the toolbar as the button to launch my dialog.

ckeditor
    -- dialogs
        -- upload.html
        -- upload.js
    -- images
        -- icon.png
    -- plugin.js

Now to put some content in the plugin.js file in your plugin folder…

plugin.js

CKEDITOR.plugins.add('uploader',{
    requires: ['iframedialog'],
    init:function(a){
        CKEDITOR.dialog.addIframe('upload_dialog', 'Image Uploader','path/to/ckeditor/plugins/uploader/dialogs/upload.html',550,400,function(){/*oniframeload*/})
        var cmd = a.addCommand('uploader', {exec:uploader_onclick})
        cmd.modes={wysiwyg:1,source:1}
        cmd.canUndo=false
        a.ui.addButton('uploader',{ label:'Upload an Image..', command:'uploader', icon:this.path+'images/icon.png' })
    }
})

function uploader_onclick(e)
{
    // run when custom button is clicked
    CKEDITOR.instances.editor1.openDialog('upload_dialog')
}

I guess some explanation is required for this…

There is a plugin called ‘iframedialog’ which does all the difficult(!) work in registering a dialog. We need to reference it to be able to use it (hence the requires:['iframedialog']).

“CKEDITOR.dialog.addIframe” registers an iframe using the plugin ‘iframedialog’ take a the following parameters:

1. name
2. window title
3. url
4. width
5. height
6. on_iframe_loaded callback function

Once you have registered the iframe dialog, you can add a new command which calls a function (uploader_onclick) which then opens the registered iframe. Simple really!!

The only thing you need to do now is to instruct CKEditor to load the plugin.js file from your folder. To do that open the file “ckeditor.js” and do a search for the phrase ‘about,
This should take you to the part of the script which lists all the plugins. Add your plugin name to this comma-separated list and tryout your new plugin!

UPDATE: Handling the OK Button

Many thanks to Lee for extending my tutorial to handle to OK button (something a lot of you have been asking about).

Add the following to the page in the iframe…

var CKEDITOR = window.parent.CKEDITOR;

var okListener = function(ev) {
   this._.editor.insertHtml('<p>Text Here</p>');
   CKEDITOR.dialog.getCurrent().removeListener("ok", okListener);
};

CKEDITOR.dialog.getCurrent().on("ok", okListener);