TinyMCE integration

[pthorp]

I have added the TinyMCE rich text editor to my seam project and it works very well.

However, I would like to process the saving of this component with an ajax call to my Bean using an a4j:commandLink, rather than using the h:commandLink, but this doesn't seem to work properly and the value is never populated on the backend.

I have tried to process updates on the component, but this doesn't help.

Has anyone experienced this or able to offer help?

Cheers Paul

[meetoblivion]

Are you using facelets or JSP?  How did you define your control, and did you try adding an a4j eventlistener?

[pthorp]

Hi, thanks for your reply.

I am using facelets and I had tried using listeners, but the value of my h:inputTextarea was always null no matter what I tried.

I have now solved the problem however and it seems so obvious now I've fixed it.  I noticed that if the TinyMCE was running mode="none", i.e. a normal textarea, then the ajax submit was fine and it was only a problem if I used mode="textareas". 

When using mode="textareas", I believe, TinyMCE replaces my text area with an iframe containing the editor and therefore the value of my original textarea wasn't being updated when using an ajax submit.

So, I now run a javascript call to reset my textarea value before I perform the submission of the ajax event.

Heres my test example:

      <script type="text/javascript">
        function updateContent() {
          document.getElementById("richEditorForm:contentEditor").value = tinyMCE.activeEditor.getContent({format : 'raw'});
        }
      </script>
      <h:inputTextarea id="contentEditor" value="#{tinyMCEEditor.content}" styleClass="richEditor" />
      <a4j:commandButton value="save" action="#{tinyMCEEditor.save}">
        <a4j:support event="onclick" onsubmit="updateContent();" />
      </a4j:commandButton>

Cheers, Paul