Integrate TinyMCE in GXT

[Holger Herrmann]

Hi everybody,

there is an example for how to integrate TinyMCE in GXT (https://www.sencha.com/forum/showthr...TinyMCE-in-GXT).
Unfortunately, this doesn't work for me for GXT version 3 and the current TinyMCE version (4.8.2).

Has anyone experience in doing that with a GXT 3.x version?

Thanks in advance!
Holger

[Holger Herrmann]

I figured it out and want to post the code here in case someone wants to do the same:

First, include the tiny sources in your html file:

 <script type="text/javascript" language="javascript" src="tinymce/tinymce.min.js"></script>

Here is my component:

package de.herrmann.demo.tabindexing.client.tinymce;

import com.google.gwt.dom.client.Node;
import com.google.gwt.dom.client.NodeList;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.sencha.gxt.widget.core.client.form.Field;

public class TinyMCEComponent extends Field<String> {

    // Id of the text area, used as selector for the tinyMCE part.
String id;

    public TinyMCEComponent(String id) {
        super(new TextAreaInputCell());
        this.id = id;

        setIdToTextarea();

        setWidth(Window.getClientWidth());
        setHeight(Window.getClientHeight() / 3);
    }

    /**
     * Set the id to the textarea element for having the correct selector.
     */
private void setIdToTextarea() {

        NodeList<Node> nodes = getElement().getChildNodes();
        for (int i = 0; i < nodes.getLength(); i++) {
            Node node = nodes.getItem(i);
            NodeList<Node> nodes2 = node.getChildNodes();
            for (int j = 0; j < nodes2.getLength(); j++) {
                Node node2 = nodes2.getItem(j);
                Element el = (Element) node2;
                el.setId(id);
            }
        }
    }

@Override
public String getValue() {

    if (isRendered()) {
        justSetValue(getTextData(textAreaId), this);
    }
    return super.getValue();
}

public native void justSetValue(String value, CellComponent editor) /*-{
    [email protected]::value = value;
}-*/;


@Override
public void setValue(String value) {

    super.setValue(value);
    if (isRendered()) {
        updateContent(textAreaId, value);
    }
}
protected native String getTextData(String id) /*-{

    var editor = $wnd.tinymce.get(id);
    if (editor == null)
        return "";
    return editor.getContent({format: 'html'});
}-*/;

protected native void updateContent(String id, String value) /*-{

    var editor = $wnd.tinymce.get(id);
    if (editor) {
editor.setContent(value);
    }
}-*/;



    /**
     * This has to be called AFTER the component has been added to the DOM.
     */
public void initAfterAddingToDom() {
        initTinyMCE("#" + id);
    }

    private native void initTinyMCE(String id)
    /*-{
        $wnd.tinymce.init({
selector: id,
menubar: true,
plugins: [
                'advlist autolink lists link image charmap print preview anchor textcolor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table contextmenu paste code help wordcount'
            ],
toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '//www.tinymce.com/css/codepen.min.css']
        });
    }-*/;

    /**
     * Redrawing the component would remove the id in the text area tag.
     */
@Override
protected void onRedraw() {
        setIdToTextarea();
    }
}

And the implementation of the entry point:

package de.herrmann.demo.tabindexing.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import de.herrmann.demo.tabindexing.client.tinymce.TinyMCEComponent;

public class tabindexing implements EntryPoint {

   public void onModuleLoad() {

      final TinyMCEComponent field = new TinyMCEComponent("mytextarea");
      final TinyMCEComponent field2 = new TinyMCEComponent("newArea");

      RootPanel.get("root").add(field);
      RootPanel.get("root").add(field2);

      field.initAfterAddingToDom();
      field2.initAfterAddingToDom();
   }
}

It's important that the initialization method is called after the editor has been added to the DOM tree.

Hope I could help somebody.

Best,
Holger