Integration TinyMCE in GXT

[91dj85]

Hello, I have a problem on function getValue() with firefox but not with IE
someone can help me ?
thank you

[jeetmarwah]

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]

Hey Guys,

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

Thanks,
Jeet

[jeetmarwah]

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]

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]

Thanks for showing of TinyMCE, works beaufitully

The cost of a new duvet may be difficult to justify but for the most comfortable sleep the investment is justified. When used with a new mattress topper you'll awake feeling refreshed.

[Holger Herrmann]

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]

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/showthr...TinyMCE-in-GXT

Best,
Holger