I personally like FCKeditor for rich html editor. but it seems nobody has integrated this to GXT. (I've found the solution for EXTJS). So i sat down and spend a day or so and got it working finally.
There are two things you need to:
1. create a java class to extends TextArea. See the code as below:
public class FCKeditor extends TextArea {
@Override
protected void onLoad() {
super.onLoad();
LoadFckEditor();
}
private native void LoadFckEditor()/*-{
var oFCKeditor = new FCKeditor(t
[email protected]::getName()());
var sBasePath = @com.extjs.gxt.ui.client.Registry::get(Ljava/lang/String;)("baseUrl") + "lib/fckeditor/";
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height =
[email protected]::getHeight()();
//oFCKeditor.Width =
[email protected]::getWidth()();
oFCKeditor.Config.SkinPath = sBasePath + 'editor/skins/office2003/';
oFCKeditor.Value =
[email protected]::getValue()();
oFCKeditor.ReplaceTextarea();
}-*/;
}
2.Modify the FCKeditor ReplaceTextarea function (the filename you need to change is fckeditor.js). See my version of code as below:
FCKeditor.prototype.ReplaceTextarea = function() {
if (!this.CheckBrowser || this._IsCompatibleBrowser()) {
// We must check the elements firstly using the Id and then the name.
var oTextarea = window.parent.document.getElementById(this.InstanceName);
var colElementsByName = window.parent.document.getElementsByName(this.InstanceName);
var i = 0;
while (oTextarea || i == 0) {
if (oTextarea && oTextarea.tagName.toLowerCase() == 'textarea')
break;
oTextarea = colElementsByName[i++];
}
if (!oTextarea) {
alert('Error: The TEXTAREA with id or name set to "' + this.InstanceName + '" was not found');
return;
}
oTextarea.style.display = 'none';
if (oTextarea.tabIndex)
this.TabIndex = oTextarea.tabIndex;
this._InsertHtmlBefore(this._GetConfigHtml(), oTextarea);
this._InsertHtmlBefore(this._GetIFrameHtml(), oTextarea);
}
}
Hope this can be any useful for anyone out there who shares the same needs as me.
stephen