Native RichTextEditor

[bgmoon]

Just downloaded the source and am trying to sort it out. I'm developing using NetBeans 6.1, so I've got a bit of work to do to create a project and all. What are you developing in and do you have a build environment for the source?

The first thing that I did was to cut down the "image bundle" set of images. There were over 1000 images in that directory and only a handful were being used.

My first run attempt (building from source) ended without a toolbar being constructed. I'm still trying to figure out what's going on there. I'll send you any fixes that I create along the way. You can always contact me directly at bgmoon AT team-moon DOT com (with the AT and DOT replaced with the proper things

[stang]

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(this.@com.simpleclick.webclient.client.AppWindow.FCKeditor::getName()());
var sBasePath = @com.extjs.gxt.ui.client.Registry::get(Ljava/lang/String("baseUrl") + "lib/fckeditor/";
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = this.@com.simpleclick.webclient.client.AppWindow.FCKeditor::getHeight()();
//oFCKeditor.Width = this.@com.simpleclick.webclient.client.AppWindow.FCKeditor::getWidth()();
oFCKeditor.Config.SkinPath = sBasePath + 'editor/skins/office2003/';
oFCKeditor.Value = this.@com.simpleclick.webclient.client.AppWindow.FCKeditor::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