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)