Integration TinyMCE in GXT

[Webflash]

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]

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]

You can try use this way initializing http://wiki.moxiecode.com/index.php/...: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]

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]

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]

First you need download languages from http://services.moxiecode.com/i18n/,
look to this too http://code.google.com/webtoolkit/do...alization.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