I’ve been using the FCKEditor rich text editor that can be implemented directly through Coldfusion 8 for some time now, but recently felt it was time to update. FCKEditor has now become CKEditor and appears to have made some pretty cool improvements.  I haven’t really had a chance to dive into the new editor, but thought I’d post a quick getting started kind of thing.  So the first step is, of course, downloading the plugin and copying it into your root folder, or wherever on your server.

Once you’ve got a copy, create a link to it in your header.  In the following example that I give I use jQuery  just because it makes my life ten times easier, but CKEditor is not a jQuery plugin and does not require it to run.  The easiest way to implement the editor is to create a standard HTML textarea and replace it with the rich text editor.  Before continuing to some code you can check out what the code will be creating here.

The HTML

Convert to Rich Text Editor?<span id="convertyes" class="textClick"> Yes</span>&nbsp;<span id="convertno" class="textClick"> No</span><br /><br />
<textarea name="myeditor">This is default text!</textarea><br /><br />
<span id="getvalue" class="textClick">Get Value</span>

We have just a couple things here.  Most important is the textarea with the name ‘myeditor’.  This is the textarea that we will convert to the rich text editor.  Otherwise, are just a couple functionality buttons.  First are a couple ‘yes’/'no’ buttons for converting the textarea to the editor and removing the editor.  And below the textarea is a button that allows us to get the value entered into the rich text area for further processing.

So let’s take a look at the javascript.

Implementing CKEditor with Javascript

$(document).ready(function()
{
	converteditor();
	getvalue();
});

converteditor = function()
{
	$("#convertyes").unbind().click(function()
	{
		//turn our description into the ckeditor WYSIWIG
		CKEDITOR.replace('myeditor',
		{
			toolbar	:	'Basic',
			width	:	600,
			height	:	400,
			forcePasteAsPlainText	:	true,
			startupFocus	: 	true,
			resize_enabled	:	true,
			resize_maxHeight	:	450,
			resize_maxWidth	:	650,
			resize_minHeight	:	300,
			resize_minWidth	:	500
		});
	});

	$("#convertno").unbind().click(function()
	{
		//get editor instance
		var editor = CKEDITOR.instances.myeditor;

		//remove the editor instance
		CKEDITOR.remove(editor);

		//remove it from DOM
		$("#cke_myeditor").remove();
	});
}

getvalue = function()
{
	$("#getvalue").unbind().click(function()
	{
		//get editor object
		var editor = CKEDITOR.instances.myeditor;

		//check if we have an editor
		if(editor == undefined)
		{
			alert("Convert to editor first.");
		}
		else
		{
			//get the value in the editor
			var value = editor.getData();

			alert(value);
		}
	});
}

We have two functions working here.  The first converts the textarea to the rich text editor, or removes the editor.  The second gets the value in the rich text editor and alerts it.

We’ll start with the converteditor() function.  We listen for two click events.  The first listens for when the user clicks ‘yes’ to convert the textarea to the CKEditor.  When ‘yes’ is clicked we use CKEditor’s replace() method to convert the textarea.  I’ve used here what I consider to be the most common implementation of the editor, as well as the most common properties.  Nonetheless, CKEditor has a fairly extensive API.  The replace() method takes two arguments.  The first is the name of the textarea that it is to replace.  The second is an array of properties that can be set for the editor.  The ‘forcePasteAsPlainText’ property will force the user to paste their text as plain text.  This is great for those moving text from Word to the web.

Next, the user can click ‘no’ to remove the current editor.  When the textarea is replaced, an instance of the editor by the name of the original textarea is created.  This is the instance that will be referred to when performing actions on the editor.  To get the current instance use ‘CKEDITOR.instances.[name  of editor]‘.  This will store your editor instance into a variable.  To remove the editor instance use the remove() method.  Although this removes the editor instance, it does not actually remove it from the DOM.  Here, I’ve used jQuery to remove the actual editor from the DOM.  CKEditor always creates a <span> tag with an id of ‘cke_[name of editor]‘.  It’s this span that needs to be removed if necessary.

Lastly, why would we have a rich text editor if we weren’t doing something with the text the user enters.  The value of the text area cannot be gotten with jQuery the way a standard textarea can be gotten.  Instead, the CKEditor API provides a getData() method.  Use this to get the value inside the text editor.  It will return the HTML and everything.  So, again, we need to get our editor instance.  Once we have that we can use the getData() method to return the value of the editor.  Here I just alert it, but you could, of course, continue with the data in whatever way suits your application.  Hopefully this will help you get the CKEditor up and running with a few common features.  But don’t forget to check out the API documentation, because there is a ton more you can do.