PDA

View Full Version : Integration TinyMCE in GXT



Webflash
13 Aug 2008, 11:46 PM
Download latest version http://tinymce.moxiecode.com/download.php unzip under public folder
in your html file <script language='javascript' rc='gwtproject.nocache.js'></script>
put:

<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "none",
theme : "advanced",
plugins : "safari,layer,table,advhr,advimage,advlink,iespell,inlinepopups,media,searchreplace,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "iespell,media,advhr,separator,separator,ltr,rtl,separator",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
apply_source_formatting : true,
spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv"
});

</script>


import com.extjs.gxt.ui.client.widget.form.Field;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.HTMLPanel;

/**
* @author webflash
*/
public class TinyMCE extends Field<String> {
private String id;

@Override
protected void onRender(Element target, int index) {
if (el() == null) {
setElement(DOM.createTextArea());
el().insertInto(target, index);
getElement().setAttribute("id", id = HTMLPanel.createUniqueId());
}
initTinyMCE(id);
super.onRender(target, index);
}

@Override
public String getValue() {
if(rendered){
super.setValue(getTextData(id));
}
return super.getValue();
}

@Override
public void setValue(String value) {
super.setValue(value);
if (rendered) {
updateContent(id,value);
}
}

protected native String getTextData(String id) /*-{
return $wnd.tinyMCE.getInstanceById(id).getContent({format : 'raw'});
}-*/;

protected native void updateContent(String id,String value) /*-{
var editor = $wnd.tinyMCE.getInstanceById(id);
if(editor){
editor.setContent(value);
}
}-*/;

private native void initTinyMCE(String id)/*-{
$wnd.tinyMCE.execCommand("mceAddControl", true, id);
}-*/;

@Override
public void focus() {
super.focus();
focusMCE(id);
}

protected native void focusMCE(String id) /*-{
$wnd.tinyMCE.execCommand('mceFocus', true, id);
}-*/;

}



public class UIWiget implements EntryPoint {

public void onModuleLoad() {
Viewport viewPort = new Viewport();
viewPort.setLayout(new FitLayout());


FormPanel formPanel = new FormPanel();
final TinyMCE field = new TinyMCE();
field.setValue("test");
formPanel.add(field);
formPanel.addButton(new Button("test",new SelectionListener<ButtonEvent>(){
public void componentSelected(ButtonEvent ce) {
Window.alert(field.getValue());
}}));
viewPort.add(formPanel);
RootPanel.get().add(viewPort);
}

}

maku
22 Aug 2008, 5:27 AM
Hi,

thanks for the showcase of integrating TinyMCE in GXT.

I've a question regarding to setting the language.

When I initialize TinyMCE already in the html file I've no knowledge of language I've to set (I can only set the language parameter in a static way)

I tried to set the language in my GWT code but with no success.

Can anybody of you give me a hint how the set the "right" language (i18n) based on GWT information in a dynamic way?

TIA

Regards,

Martin

Webflash
25 Aug 2008, 12:55 AM
You can try use this way initializing http://wiki.moxiecode.com/index.php/TinyMCE:Configuration (down page)

As an alternative, the tinyMCE.init statement can be put in it's own file and referenced in a script tag:
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/basic_config.js"></script>
basic_config.js you can make servlet for example basicConfig and return

tinyMCE.init({
mode : "none",
language : "en"
...
});or else language : "nl"

Webflash
25 Aug 2008, 8:05 AM
you can put in head only
<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js"></script>
then in your entry point
can get current active GWT locale

public void onModuleLoad() {
String localeName = LocaleInfo.getCurrentLocale().getLocaleName();
Element script = DOM.createElement("script");
//firs ease way set inner html
script.setInnerHTML("there init of editor with defined language " +localeName);
//second way it set "src" attribute to servlet where you return init code for editor
RootPanel.getBodyElement().appendChild(script);
}

maku
27 Aug 2008, 8:33 AM
you can put in head only
<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js"></script>
then in your entry point
can get current active GWT locale

public void onModuleLoad() {
String localeName = LocaleInfo.getCurrentLocale().getLocaleName();
Element script = DOM.createElement("script");
//firs ease way set inner html
script.setInnerHTML("there init of editor with defined language " +localeName);
//second way it set "src" attribute to servlet where you return init code for editor
RootPanel.getBodyElement().appendChild(script);
}

Hi, I tried this but with no success. Is this a variation you tried out and which should work?

Webflash
28 Aug 2008, 12:30 AM
First you need download languages from http://services.moxiecode.com/i18n/,
look to this too http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.Internationalization.html
Then in YourProject.gwt.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<module>
<inherits name="com.extjs.gxt.ui.GXT"/>
//next language which you want support
<extend-property name="locale" values="fr"/>
<extend-property name="locale" values="uk"/>
<extend-property name="locale" values="en"/>
<entry-point class="yor entri point class " />
</module>Than in your public/YourProject.html


<html>
<head>
<title>Wrapper HTML for </title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- default locale -->
<meta name="gwt:property" content="locale=uk">
<!-- your path to tiny directory -->
<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js">
</script>

<script language='javascript' src='yor cash file.nocache.js'>
</script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0">
</iframe>
</body>
</html>
Than in your Entry point class


public void onModuleLoad() {
String localeName = LocaleInfo.getCurrentLocale().getLocaleName();
Element script = DOM.createElement("script");
//Window.alert(localeName);
script.setInnerHTML("tinyMCE.init({mode: \"none\",theme: \"simple\",language : \"".concat(localeName).concat("\"});"));
RootPanel.getBodyElement().appendChild(script);
}
It work in my project change you can chage locale type
http://localhost:8889/your path/YourProject.html?locale=fr

maku
28 Aug 2008, 9:23 AM
First you need download languages from http://services.moxiecode.com/i18n/,
look to this too http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.Internationalization.html
Then in YourProject.gwt.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<module>
<inherits name="com.extjs.gxt.ui.GXT"/>
//next language which you want support
<extend-property name="locale" values="fr"/>
<extend-property name="locale" values="uk"/>
<extend-property name="locale" values="en"/>
<entry-point class="yor entri point class " />
</module>Than in your public/YourProject.html


<html>
<head>
<title>Wrapper HTML for </title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- default locale -->
<meta name="gwt:property" content="locale=uk">
<!-- your path to tiny directory -->
<script language="javascript" type="text/javascript" src="tinymce/tiny_mce.js">
</script>

<script language='javascript' src='yor cash file.nocache.js'>
</script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0">
</iframe>
</body>
</html>
Than in your Entry point class


public void onModuleLoad() {
String localeName = LocaleInfo.getCurrentLocale().getLocaleName();
Element script = DOM.createElement("script");
//Window.alert(localeName);
script.setInnerHTML("tinyMCE.init({mode: \"none\",theme: \"simple\",language : \"".concat(localeName).concat("\"});"));
RootPanel.getBodyElement().appendChild(script);
}
It work in my project change you can chage locale type
http://localhost:8889/your path/YourProject.html?locale=fr

When I try to use it exactly in the same manner I get an Exception on setting the javascript via setInnerHTML.

I use GWT 1.5.1


[ERROR] Unable to load module entry point class com.act24.client.GxtTest (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (Error): Unbekannter Laufzeitfehler
number: -2146827688
description: Unbekannter Laufzeitfehler
at com.google.gwt.dom.client.Element$.setInnerHTML$(Native Method)
at com.act24.client.GxtTest.onModuleLoad(GxtTest.java:61)

Webflash
29 Aug 2008, 2:34 AM
When I try to use it exactly in the same manner I get an Exception on setting the javascript via setInnerHTML.

I use GWT 1.5.1


[ERROR] Unable to load module entry point class com.act24.client.GxtTest (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: (Error): Unbekannter Laufzeitfehler
number: -2146827688
description: Unbekannter Laufzeitfehler
at com.google.gwt.dom.client.Element$.setInnerHTML$(Native Method)
at com.act24.client.GxtTest.onModuleLoad(GxtTest.java:61)
I have not error, I use gwt 1.5.0 RC

premraj
12 Jan 2009, 11:29 PM
hi,
when i use tinymce in two different panels i got t.win.document is null error in firefox error console and unable to focus on tinymce field while same is working fine with ie

v0ntemon
17 May 2009, 6:26 AM
thanks for the showcase of integrating TinyMCE in GXT.

91dj85
21 May 2009, 8:32 AM
Hello, I have a problem on function getValue() with firefox but not with IE
someone can help me ?
thank you

jeetmarwah
19 Apr 2010, 1:53 PM
Hi,

I am trying to implement TinyMCE for last few days and not been successful yet in any browser. Here are the details :

I am using GXT 2.1.2, GWT 1.7, TinyMCE 3.3.2. I have followed all the steps listed in the beginning of this thread and still no success in IE or in Firefox. In IE, I get a javascript error 'this.getDoc().body is null or not an object' and in Firefox, there is no error neither is the toolbar.

Here are the steps and code
1) This is my <GWT Project>.jsp



....
<script type="text/javascript" language="javascript" src="/resolve/rswiki/rswiki.nocache.js"></script>

<script src="/resolve/js/tiny_mce/tiny_mce.js" type="text/javascript" language="JavaScript"></script>

<script lang="javascript" type="text/javascript">
tinyMCE.init
({
mode : "textareas",
theme : "simple"
});
</script>
....


2) Here is my Component




import com.extjs.gxt.ui.client.widget.form.Field;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.HTMLPanel;

public class TinyMCETextArea extends Field<String>
{
private String id;

public TinyMCETextArea(String id)
{
super();
this.id = id;
}

public TinyMCETextArea()
{
this(HTMLPanel.createUniqueId());
}

@Override
protected void onRender(Element target, int index)
{
if (el() == null)
{
setElement(DOM.createTextArea());
el().insertInto(target, index);
getElement().setAttribute("id", this.id);
}
initTinyMCE(id);

super.onRender(target, index);
}

@Override
public String getValue()
{
if (rendered)
{
super.setValue(getTextData(id));
}
return super.getValue();
}

@Override
public void setValue(String value)
{
super.setValue(value);
if (rendered)
{
updateContent(id, value);
}
}

protected native String getTextData(String id)
/*-{
return $wnd.tinyMCE.getInstanceById(id).getContent({format : 'raw'});
}-*/;

protected native void updateContent(String id, String value)
/*-{
var editor = $wnd.tinyMCE.getInstanceById(id);
if(editor){
editor.setContent(value);
}
}-*/;

private native void initTinyMCE(String id)
/*-{
$wnd.tinyMCE.execCommand("mceAddControl", true, id);
}-*/;

@Override
public void focus()
{
super.focus();
focusMCE(id);
}

protected native void focusMCE(String id)
/*-{
$wnd.tinyMCE.execCommand('mceFocus', true, id);
}-*/;

}



3) Here is my GWT/GXT component that I created



private ContentPanel createWYSIWYGEditPanel(final WikiServiceAsync wikiService, String controlId, final ContentPanel main)
{
final FormPanel viewForm = new FormPanel();
viewForm.setLayout(new FitLayout());
viewForm.setId(WikiGUIConstants.VISUAL_CP_ID);
viewForm.setHeaderVisible(false);

final TinyMCETextArea description = new TinyMCETextArea();
description.setId(WikiGUIConstants.EDIT_WYSIWYG_ID);
description.setHideLabel(true);
description.setReadOnly(!isEditMode);
description.setValue("Here I am ");

wikiService.getContentToEdit(controlId, new RSAsyncCallback<Map<String, String>>()
{
@Override
public void onSuccess(Map<String, String> result)
{
....
String wysiwyg = result.get(WikiGUIConstants.WIKI_WYSIWYG_KEY);

//description.setValue(wysiwyg);
}
});

viewForm.add(description, new FormData("100%"));

return viewForm;
}


4) The above content panel I add to a TabItem of a TabPanel.

Please let me know if you need any more info. Any idea is welcome as I have none :)

Thanks,
Jeet

jeetmarwah
27 May 2010, 9:33 AM
Hey Guys,

Any ideas on the TinyMCE issue that I am having??

Thanks,
Jeet

jeetmarwah
19 Jul 2010, 9:48 AM
Has anybody used TinyMCE in a tabpanel? I am able to work using a JSP page and setting the url to the tabitem but not been able to make it work with the tabitem (having a textarea component) itself.

Any ideas/examples/help ?

Thanks.

eggp
21 Nov 2011, 3:47 AM
hello

i improved the code, the current code and add resize handler...


import com.extjs.gxt.ui.client.widget.form.Field;import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.HTMLPanel;


public class TinymceField extends Field<String> {
public TinymceField()
{
}




@Override
protected void onResize(int width, int height) {
this.resize(this.getId(), width, height);
super.onResize(width, height);

}






@Override
protected void onRender(Element target, int index)
{
if (el() == null)
{
setElement(DOM.createTextArea());
el().insertInto(target, index);
getElement().setAttribute("id", this.getId());
}
initTinyMCE(this.getId());


super.onRender(target, index);
}


@Override
public String getValue()
{
if (rendered)
{
super.setValue(getTextData(this.getId()));
}
return super.getValue();
}


@Override
public void setValue(String value)
{
super.setValue(value);
if (rendered)
{
updateContent(this.getId(), value);
}
}


protected native String getTextData(String id)
/*-{
return $wnd.tinyMCE.getInstanceById(id).getContent({format : 'raw'});
}-*/;


protected native void updateContent(String id, String value)
/*-{
var editor = $wnd.tinyMCE.getInstanceById(id);
if(editor){
editor.setContent(value);
}
}-*/;


private native void initTinyMCE(String id)
/*-{
$wnd.tinyMCE.execCommand("mceAddControl", true, id);
}-*/;


@Override
public void focus()
{
super.focus();
focusMCE(this.getId());
}


protected native void focusMCE(String id)
/*-{
$wnd.tinyMCE.execCommand('mceFocus', true, id);
}-*/;

protected native void resize(String id,int width, int height)
/*-{
var elem = $wnd.document.getElementById(id+"_tbl");
if(elem != null)
{
elem.style.width = width+"px";
if(height >0 )
{
elem.style.height = height+"px";
}
}
}-*/;


}

duvets10
6 Feb 2012, 3:31 AM
Thanks for showing of TinyMCE, works beaufitully



The cost of a new duvet (http://www.duvetandpillowwarehouse.co.uk) may be difficult to justify but for the most comfortable sleep the investment is justified. When used with a new mattress topper (http://www.duvetandpillowwarehouse.co.uk/department/Toppers) you'll awake feeling refreshed.

Holger Herrmann
22 Aug 2018, 4:16 AM
Hi everybody!

I know this is a quite old posting. For now, I'm trying to integrate the current version of TinyMCE (which is 4.8.2) in our GXT application (with GXT version 3.0.7).
Unfortunately, I don't get it running, there are too many changes in the field handlig and rendering (there is no onRender method in Field<String> to override).

Has anybody done this integration with newer versions of GXT?

Thanks in advance for any help!

Holger

Holger Herrmann
29 Aug 2018, 11:13 PM
Hi there,

if someone trips over this post, please have a look at the solution I posted in a newer thread:

https://www.sencha.com/forum/showthread.php?470594-Integrate-TinyMCE-in-GXT

Best,
Holger