Insert HTML into FCKEditor

FCKEditor is an in-browser WYSIWYG HTML editor and I post howtos etc for FCKEditor on this blog roughly every 10 days in the Javascript category. This post looks at how to insert HTML into an FCKEditor editing area which you might need to do from your own custom dialog window.

Embed the FCKEditor

The FCKEditor in the examples in this post has been embedded into the page using the following PHP code. There are other ways of embedding an FCKEditor but this is my preferred method:

$FCKeditor = new FCKeditor('html');
... various settings ...
$FCKeditor->Create();

Get a handle to the FCKEditor instance

Before we can paste some HTML into the FCKEditor we need to get a handle to the instance. The name of the instance in the above example is ‘html’ which is passed to the object constuctor. To get a handle to the instance in Javascript do this:

var oEditor = FCKeditorAPI.GetInstance('html') ;

If the Javascript code is being run from a popup window, then you can get a handle to the instance in the parent window like this:

var oEditor = window.opener.FCKeditorAPI.GetInstance('html') ;

Insert the HTML

Now that we have a handle to the FCKEditor instance we can inject some HTML into the editor at the current cursor insertion point using the .InsertHtml() method.

The following example would insert the HTML <p>hello world</p> at the current insertion point:

oEditor.InsertHtml("<p>hello world</p>");

Future posts

As mentioned at the start of this post, I post a new FCKEditor article roughly every 10 days in the Javascript section of this blog. The other twice weekly Javascript posts are usually about jQuery and sometimes more generic Javascript functions. Make sure you subscribe to my RSS feed (details below) so you don’t miss out.