Richfaces 4.2 and TinyMCE

Question

I am trying to use Richfaces 4.2 and my own custom TinyMCE rich text editor (based on version 3.5.11).

The editor was installed like the official tutorial (http://www.tinymce.com/wiki.php/Installation). It works and the editor is applied to any textarea.

My problem is after ajax submits, when the form is re-rendered, so the TinyMCE instance is lost and not applied anymore.

Is there some way to deal with it, reapplying the TinyMCE on every ajax submit or any other approach?

Answer 1

I did a workaround that allowed TinyMCE to interact with Richfaces ajax actions and renders, so I will answer my own question although I believe its not the best answer possible.

Here is my solution:

Copy TinyMCE folder to my WebContent/js folder, including the tiny.js which is a init file (external file optional).

This file contains both the tinyMCE init config and the JSF2 javascript that join tinyMCE and render actions.

Here is the tiny.js code:

jsf.ajax.addOnEvent(function(data) {
switch(data.status) {
    case "begin":
        tinyMCE.triggerSave();
        break;

    case "complete":
        break;

    case "success":
        var i, t = tinyMCE.editors;
        for (i in t){
            if (t.hasOwnProperty(i)){
                t[i].remove();
            }
        }

        tinyMCEinit();
        break;
}});

function tinyMCEinit(){  
tinyMCE.init({
    language : "pt",
    mode : "textareas",
    theme : "advanced",
    mode : "textareas" 
});}

What JSF 2 Javascript do is call the tinyMCEinit() function that cleans all textareas and reapply it all again. It works nice when you open the page for the first time, maybe a little heavy DOM processing, but the final user will no notice the loading... unless you page have 4 texareas/editors and need to be editable like a list of Alternatives Question. 4 editors on the same page have slow loading time and previous rich:editor/ckeditor will notice the performance lost.

Well, one little touch of javascript needs to be added to your "Save" buttons like this:

<a4j:commandButton onclick="tinyMCE.triggerSave();" render="some_panel" value="Any render"></a4j:commandButton>

The triggerSave() transfer the values (html) on the editor to the h:inputTextarea so JSF can grab the values and send it to the backend.