CKEditor is the new and improved successor to the venerable FCKeditor JavaScript WYSIWYG editor. I’ve used TinyMCE and FCKeditor before, but this was my first time trying out the new CKEditor 3.1. I am using it on a new Drupal website via the Drupal CKEditor module. The problem I ran into, however, is using Lightbox2 on images inserted via CKEditor. CK does not provide a way to add the “rel” attribute to image links (or any links for that matter). CK also doesn’t allow adding the “title” attribute to image links. Lightbox uses both of these to determine which images to display, group together in galleries, provide a caption, etc. I found a patch for FCKeditor which allows adding a “rel” attribute to image links, but I couldn’t find one for the new CKEditor. So here we are. :)

This is a total hack, since I have not looked in to how to properly make a plugin for the new CKEditor, but it works pretty well. Maybe someone who knows how to make plugins to CKEditor can show me the way.

To start hacking, we need to first copy over the minified ckeditor\plugins\image\dialogs\image.js with the indented ckeditor\_source\plugins\image\dialogs\image.js, since it’s really hard to work with the minified image.js.

In image.js all of the tabs and fields in the Image popup dialog are defined in the “contents” array (below the onHide function). We will add our new “rel” and “title” fields to the content array, in the “Link” tab’s sub-array. I added the new code at the end of the Link tab’s definition array after the txtUrl, browse, and cmbTarget fields (around line 1146). The code I added is:

{
id : 'txtTitle',
type : 'text',
label : editor.lang.link.advisoryTitle,
'default' : '',
setup : function( type, element )
{
	if ( type == LINK )
	{
		this.setValue( element.getAttribute( 'title' ) );
	}
},
commit : function( type, element )
{
	if ( type == LINK )
	{
		if ( this.getValue() || this.isChanged() )
		{
			element.setAttribute( 'title', this.getValue() );
		}
	}
}
},
{
id : 'txtRel',
type : 'text',
label : editor.lang.link.rel,
'default' : '',
setup : function( type, element )
{
	if ( type == LINK )
	{
		this.setValue( element.getAttribute( 'rel' ) );
	}
},
commit : function( type, element )
{
	if ( type == LINK )
	{
		if ( this.getValue() || this.isChanged() )
		{
			element.setAttribute( 'rel', this.getValue() );
		}
	}
}
},

This adds a txtTitle and txtRel field to the Link tab on the Insert Image CKEditor dialog. Look out for commas! The first time I did this I missed a comma between the cmbTarget and txtTitle declarations, which borked everything.

The final thing we need to do is create the “editor.lang.link.rel” English translation definition so the new txtRel field is properly labeled in the dialog (I re-used the existing “editor.lang.link.advisoryTitle” translation for txtTitle). To do this, open up ckeditor\lang\en.js. I added the following snipped between styles and selectAnchor in the “Link” block, but just make sure it’s in the “Link” block of translations.

rel:'Rel',

You could probably hard-code this label, but I kept with the translation system. I didn’t do any labels except the English one, but you get the idea. If you are using another language insert the “rel” label into the appropriate file for that language.

You can now set the “rel” and “title” attributes on the image link, and use them with the Lightbox of your choice!