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:
| No Format |
|---|
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:
| No Format |
|---|
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"
});
}-*/;
}
|
...
This forums post discusses some of the issues and shows sample code for older versions / fckEditor:
Download CKEditor here: