1. #11
    Ext User
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
    91dj85 is on a distinguished road

      0  

    Default


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

  2. #12
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    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

    Code:
    ....
        <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

    Code:
    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

    Code:
    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

  3. #13
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    Hey Guys,

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

    Thanks,
    Jeet

  4. #14
    Sencha User
    Join Date
    Mar 2010
    Location
    Laguna Niguel, CA
    Posts
    62
    Vote Rating
    0
    jeetmarwah is on a distinguished road

      0  

    Default


    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.

  5. #15
    Sencha User
    Join Date
    Sep 2011
    Posts
    17
    Vote Rating
    0
    eggp is on a distinguished road

      0  

    Default GWT2.4 and GXT 2.2.5

    GWT2.4 and GXT 2.2.5


    hello

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

    Code:
    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";
    			}
    		}
    	}-*/;
    
    
    }

  6. #16
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    duvets10 is on a distinguished road

      0  

    Default


    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.
    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.