Results 1 to 2 of 2

Thread: Integrate TinyMCE in GXT

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default Integrate TinyMCE in GXT

    Hi everybody,

    there is an example for how to integrate TinyMCE in GXT (https://www.sencha.com/forum/showthr...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

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Nuremberg, Germany
    Posts
    88

    Default

    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:

    Code:
     <script type="text/javascript" language="javascript" src="tinymce/tinymce.min.js"></script>
    Here is my component:

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

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

Similar Threads

  1. [Updated] Ext.ux.TinyMCE - TinyMCE form field (v0.7b1)
    By xor in forum Ext 3.x: User Extensions and Plugins
    Replies: 470
    Last Post: 6 Jul 2014, 5:37 AM
  2. TinyMCE - why not?
    By bsougias in forum Sencha Architect 3.x: Q&A
    Replies: 7
    Last Post: 31 Mar 2014, 7:02 AM
  3. How to use TinyMCE with Ext 3.0!?
    By josh_josh in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 4 Aug 2009, 8:27 AM
  4. How to use TinyMCE with Ext 2.0
    By dstaver in forum Community Discussion
    Replies: 6
    Last Post: 18 Sep 2008, 12:50 AM
  5. Using Ext with tinymce
    By GraemeBaillie in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 1 Jul 2008, 2:05 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •