Add an FCKeditor with Javascript only

Posted July 12th, 2009 in FCKEditor and Javascript

I normally embed the FCKeditor HTML editor into my forms on the server-side using PHP but it's also possible to do using Javascript alone, as I worked out when writing last week's FCKEditor post about getting the word count when I needed to embed an example with Javascript.

Basic example

It's really quite simple, all you need to do is something like this:

<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('FCKeditor1');
    oFCKeditor.BasePath = "/fckeditor/";
    oFCKeditor.Create();
</script>

Change /fckeditor/ in the Javascript src and BasePath to the correct path to your FCKEditor files.

Extended example

This extended example shows creating the editor with a number of various options set:

<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
    var oFCKeditor = new FCKeditor('FCKeditor1');
    oFCKeditor.BasePath = "/fckeditor/";
    oFCKeditor.ToolbarSet = "Basic";
    oFCKeditor.Height = "500";
    oFCKeditor.Width = "500";
    oFCKeditor.Config["CustomConfigurationsPath"] = "/js/fckconfig.js";
    oFCKeditor.Config["EditorAreaCSS"] = "/css/fckeditor.css";
    oFCKeditor.Value = "<p>This is the initial text in the editor</p>";
    oFCKeditor.Create();
</script>