Using CKEditor or fckEditor as a widget

Owned by Lee Russell (Unlicensed)
Last updated: Mar 14, 2013 by Isomorphic SupportVersion comment
2 min read

CKEditor (formerly fckEditor) is a third party rich text editing component which is free and open source. If your rich text editing needs to go beyond the relatively simple control included with the framework (for example, you need to edit tables), consider embedding CKEditor using the code below to create a reusable widget:

Code for SmartClient:

isc.defineClass("CKEditor", "Canvas").addProperties({
    redrawOnResize: false,

    getInnerHTML : function () {
        // Write out a <textarea> with a known ID.
        return "<textarea id='" + this.getID() + "_ckEditor' style='width:" + this.getWidth() + "px;height:" + this.getHeight() + "px;margin-bottom:10px'></textarea>";
    },

    draw : function () {
        if (!this.readyToDraw()) return this;

        // Call the superclass method to draw, then have CKEditor replace the <textarea> we
        // wrote out with a CKEditor widget.
        this.Super("draw", arguments);
        this._ckEditor = CKEDITOR.replace(this.getID() + "_ckEditor", {
            // Use a base zIndex of 300,000 for the dialogs such as the Insert Special Character dialog.
            baseFloatZIndex: 300000,

            // Disable these plugins because they cause the CKEditor widget to grow outside of the
            // canvas' bounds.
            removePlugins: "autogrow,resize,maximize,div,elementspath"
        });
        return this;
    }
});

Code for SmartGWT:

package com.smartgwt.sample.client.widgets;

import com.google.gwt.core.client.JavaScriptObject;
import com.smartgwt.client.widgets.Canvas;

public class CKEditor extends Canvas {

    private JavaScriptObject ckEditor;

    public CKEditor() {
        setRedrawOnResize(false);
    }

    @Override
    public String getInnerHTML() {
        return "<textarea id='" + getID() + "_ckEditor' style='width:" + getWidth() + "px;height:" + getHeight() + "px;margin-bottom:15px'></textarea>";
    }

    @Override
    protected native void onDraw() /*-{
        this.@com.smartgwt.sample.client.widgets.CKEditor::ckEditor = $wnd.CKEDITOR.replace(this.@com.smartgwt.sample.client.widgets.CKEditor::getID()() + "_ckEditor", {
            // Use a base zIndex of 300,000 for the dialogs such as the Insert Special Character dialog.
            baseFloatZIndex: 300000,

            // Disable these plugins because they cause the CKEditor widget to grow outside of the
            // canvas' bounds.
            removePlugins: "autogrow,resize,maximize,div,elementspath"
        });
    }-*/;
}

See the QuickStart Guide, Extending SmartClient / SmartGWT, "New Components" heading for more background information on embedding third-party components into SmartClient and SmartGWT - be sure to follow the link through to the JavaDoc / SmartClient Reference.  

Note: this material has been greatly expanded in 3.1, download 3.1 or later if you have an older build.

This forums post discusses some of the issues and shows sample code for older versions / fckEditor:

Download CKEditor here: