View Full Version : Integrate TinyMCE in GXT

Holger Herrmann
22 Aug 2018, 6:41 AM
Hi everybody,

there is an example for how to integrate TinyMCE in GXT (https://www.sencha.com/forum/showthread.php?44152-Integration-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 Herrmann
29 Aug 2018, 11:05 PM
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;


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;

public String getValue() {

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

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

public void setValue(String 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) {

* 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)
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: [

* Redrawing the component would remove the id in the text area tag.
protected void onRedraw() {

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");



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

Hope I could help somebody.