Adding the "rel" and "title" attributes to image links in CKEditor 3

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!