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
    Vote Rating
    1
      0  

    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
    Vote Rating
    1
      0  

    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
  •