2 Replies Latest reply on Apr 3, 2008 10:26 AM by Paul Thorp

    TinyMCE integration

    Paul Thorp Newbie

      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

        • 1. Re: TinyMCE integration
          John Ament Master

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

          • 2. Re: TinyMCE integration
            Paul Thorp Newbie

            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