Showing posts with label Tinymce. Show all posts
Showing posts with label Tinymce. Show all posts

Tuesday, September 17, 2013

Rich editor in eclipse RCP (Part2)


A few month ago I built a rich editor for eclipse based on SWT browser.
I use this implementation from this time and now I want to integrate it in an EMF (EEF generated) GUI.
In this context this widget needs a focus managment but the SWT Browser does not manage those events (See Javadoc (event) ).
In my case I decide to rely on TyneMCE events managment (blur and focus), then react on those events invoking a BrowserFunction that allows javascript to java communication. In java side  the Browser fonction notify an internal listener.

Rely on tinyMce events



those event are identified bty name : blur and focus. To be able to react to those events, add to your tiny init (JS) :
setup : function(ed) {

   ...

   ed.onInit.add(function(ed) {

     if (tinymce.isIE) {

       tinymce.dom.Event.add(ed.getWin(), 'focus', function(e) {

           evt_focusGained();

       });

       tinymce.dom.Event.add(ed.getWin(), 'blur', function(e) {

           evt_focusLost();

       });

   } else {

       tinymce.dom.Event.add(ed.getDoc(), 'focus', function(e) {

           evt_focusGained();

       });

       tinymce.dom.Event.add(ed.getDOc(), 'blur', function(e) {

           evt_focusLost();

       });

   }

   });

  },

Usage of BrowserFuntion


Browser function allow communication from javascript to java. Excerpt : "Instances of this class represent java-side "functions" that are invokable from javascript. Browser clients define these functions by subclassing BrowserFunction and overriding its function(Object[]) method. This method will be invoked whenever javascript running in the Browser makes a call with the function's name."

So I add in the completed method of the SWT browser progressListener :

browser.addProgressListener(new ProgressListener() {

 public void changed(ProgressEvent event) {

 }

 public void completed(ProgressEvent event) {

  // used for setEditorText

  completed = true;

  loadEditorText((String) browser.getData("htmlcontent"));

  new BrowserFunction(browser, "evt_focusLost") {

   public Object function(Object[] arguments) {

    notifyListenersFocusLost();

    return null;

   }

  };

  new BrowserFunction(browser, "evt_focusGained") {

   public Object function(Object[] arguments) {

    notifyListenersFocusGained();

    return null;

   }

  };

 }

});

In this implementation, you could see notifyListenersFocusLost() and notifyListenersFocusGained(). Those two methods relate to two listeners similar implementation.

public interface TinyFocusLostListener {

 public abstract void focusLost();

}

private List listenersTinyFocusLost = new ArrayList();



public void addTinyFocusLostListener(TinyFocusLostListener listenerValue) {

 listenersTinyFocusLost.add(listenerValue);

}

// Warning UI action use asyncexec in eclipse

private void notifyListenersFocusLost() {

 Display.getCurrent().asyncExec(new Runnable() {

  public void run() {

   for (TinyFocusLostListener listener : listenersTinyFocusLost) {

    listener.focusLost();

   }

  }

 });

}

finally on Java side

myTinyIntegrationInstance.addTinyFocusLostListener(new TinyFocusLostListener() {

 @Override

 public void focusLost() {

  //Add your code here

  }

 }

});

Wednesday, June 13, 2012

Rich editor in eclipse RCP (Part 1)

Rich editor in eclipse RCP (Part2)

Why this post... because I 'm looking about a rich text editor in an eclipse RCP application... After few readings I saw that is not so obvious.


You could find more info at : git@github.com:franckys/TutorialSamples.git
In the tinymceTest folder. 
This repo does not contain tinyMce so you have to download your own to make it work.


At the end I found (and use) an interresting approach : Integrate a well known (In my case) javascript rich text editor, relying on SWT browser (http://www.vogella.com/blog/2009/12/21/javascript-swt/) capabilities.... The result :

As the integraton is not an "heavy one" I decided to do my own...
These are the steps required for this integration :
  1. I download the last Tinymce version. In my case the 3.5.2 (download here)
  2. Build an HTML page containing required  :
    • CSS
    • Javascript
    • textarea html element
  3. Use your favorite tools for debuging (In my case chrome + web developers tools) to customize tinymce contents (plugins, buttons, css...)
  4. Optional : Build a specific tinymce plugin to allow contextual floating menu content managment. For this I simply :
    • take the example, 
    • follows Tinymce guide line
    • remove all unecessary code 
    • add this code :
      init : function(ed, url) {
       ed.onInit.add(function(ed, e){
       ed.plugins.contextmenu.onContextMenu.add(function(th, menu, event) {
          menu.removeAll();
          menu.add({title : 'advanced.paste_desc', icon : 'paste', cmd : 'Paste'});
          menu.add({title : 'paste.paste_word_desc', icon : 'pasteword', cmd : 'mcePasteWord'});
       ed.plugins.paste.pasteAsPlainText = 1;
        });
       });
      },
      
  5. write a java plugin :
    • providing a composite Class containing  (and presenting) "org.eclipse.swt.browser.Browser"
    • initializing this browser with an URL ponting on the previous HTML page
    • providing a setEditorContent (inject in textarea the desired and HTML/JS formated code)
    • In java
      public void setEditorContent(String htmlText) {
         String jscript = " setEditorText('" + formatEditorText(htmlText) + "');";
         if (!browser.execute(jscript)) {
           throw new UnsupportedOperationException("JavaScript was not executed.");
         }
      }
      In js
      function setEditorText(editcontent) {
         var textarea = document.getElementById('textarea');
         textarea.value = editcontent;
      }
    • providing a getEditorContent using for example 
    • In java
      public String getEditorContent() {
          Object o = browser.evaluate("return getEditorText()");
          return (String) o;
         }}
      in js
      function getEditorText() {
          var tmce = tinyMCE.get('textarea');
          return tmce.getContent();
      }
You could find more info at : git@github.com:franckys/TutorialSamples.git
In the tinymceTest folder. 
This repo does not contain tinyMce so you have to download your own to make it work.

Rich editor in eclipse RCP (Part2)