PDA

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

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;

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