View Full Version : Native RichTextEditor

8 Oct 2008, 10:34 AM
Hi erveryone,

i took the gwt-html-editor (http://code.google.com/p/gwt-html-editor/) and ported the editor to gxt 1.1.1. But there is still a lot of work to do like:

porting some gwt components to gxt components
improving the text formating
tooltips and help
and some things are not working in ie as well.Is someone interested in working together on the edtor?


13 Oct 2008, 6:12 PM
I started doing the exact same thing last weekend (porting that package to GXT.) I got about half way through and realized that it was a fairly sizable project and thought I'd look around a little longer before attempting to complete the job. Sounds like I could help you out and maybe we could have it working in fairly short order. Here's the bits that I didn't really thing were that great:

1) The event model is wrong/different. That's going to make it a challeng.
2) I'd like to have something that I don't have to maintain long term. These editors are out there by the shed loads and surely one of these guys can do a GWT/GXT port and then I'd not have to maintenance it.
3) My 'needs' are a bit less that what this provides in some areas, however I'd need to extend what it does in others. In particular, uploading images and videos to my server and then selecting them from the server (with funny sort of link names) to embed into the document would be a must for me.

At any rate, I'm willing to help out. How should we proceed?

15 Oct 2008, 10:42 PM

We use tiny_mce as html editor together with gwt and gxt. But I'm not really pleased with it (I have a problem running the editor in a gxt window with Firefox and so on).

It would be really nice to have a html editor smoothly integrated in gxt.

My question: do you have something usable in this context?


19 Oct 2008, 3:20 AM
First i would like to appologise for my late answer i had a busy week. Thanks for your interest in the editor.
Before we can work together on the editor i have to refactor the editor in a separate module. After that i will create a project at google code or sourceforge and create a demo. I presume the demo will attract more people to help us.
As soon as i have finished the project creation and checked in the source i will leave a message here. I think i will need about a week.

@maku: I have something usable. The screenshot shows the RTE fully integrated in a gxt environment and we use the editor already in a productiv system. As mentioned before, the editor is in a basic state but stable as far as i can say.

3 Nov 2008, 9:59 AM
Hi erveryone,

after two weeks i managed it to refactor the editor.

Furthermore, i replaced the GWT widgets with GXT components but there are quite a lot ie bugs to fix.

Everyone is welcome to work on the editor.

Project Home (http://code.google.com/p/gxt-rte/)

Demo (http://www.iverein.de/gxtrte/GxtRteExample.html)


4 Nov 2008, 12:46 AM
Just to let me know, why did you use gwt-html-editor ? I think there is already a RichTextArea widget in GWT. Has it more features ?

4 Nov 2008, 1:13 AM
hi all,

i am using tiny_mce within gxt extensively. there are no problems except one workaround for resizing. it just fits perfectly and has everything i would expect from an editor.

regards, kht

4 Nov 2008, 1:20 AM
How do you integrate tiny mce in gxt ? I suppose you are using JSNI ?

4 Nov 2008, 3:58 AM
Hi zaccret,

at the moment it does not have more features than the gwt provieded rich text area. But you have to implement a toolbar to operate the editor youself and the options of the gwt rta are limited. Thats why i took the html gwt-html-editor.

@kht: I think integrating tine_mce via JSNI is a good approach to get a full featured rte with less efford. But if you want to integrate the editor into your look and feel and if you want to configure the editor more deeply or adept the code to your needs it would be nice to have an gwt/gxt based editor. Don't you think so?


4 Nov 2008, 5:10 AM
How do you integrate tiny mce in gxt ? I suppose you are using JSNI ?

yes, jsni. look and feel can be adopted - dialogs also.
but i agree that a native gxt rte would be great.
for me it just was important how fast i get a result as i dont get paid for my project ;)

regards, kht

22 Nov 2008, 7:06 PM
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 :)

27 Dec 2008, 2:57 PM
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 {
protected void onLoad() {
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()();

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')
oTextarea = colElementsByName[i++];

if (!oTextarea) {
alert('Error: The TEXTAREA with id or name set to "' + this.InstanceName + '" was not found');

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.