1 2 Previous Next 22 Replies Latest reply on Nov 26, 2008 12:22 PM by ronanker

    Future xHTML Editor (wysiwyg)

    ronanker

      Hi !

      I'm actually working on the integration of tinyMCE in my application.
      I had already integrated V2 it in the app's last version where there is no richface nor ajax.

      Now in our comming version i'm able to make TinyMCE V3 function but there is still some littles things to work out...

      I know RichFaces Team will not work on this before V3.2.2 but my work can probably help... And the issues i still have to solve are quite related to RF and will probably be easyer to solve by making a RF integrated component.

      I would like to know if there is a specific place like a wiki page were we can host work on this...
      I havent seen any task in jira. and no page in the wiki.

      I think we are several persons who need this in differents companies and we can work together to have this component sooner.

      I'll post several messages today on different forums : here and tinyMCE.
      letting my work to the community as i stop now this integration and i'll work again on it only in 3 weeks.

        • 1. Re: Future xHTML Editor (wysiwyg)
          ronanker

          For lots of reasons TinyMCE seems the best wysiwyg editor (FCKEditor in second place)
          Also, only the V3 will fit our needs... V2 isn't good for ajax.

          The JSF compressor that tinyMCE team propose isn't really well supported, so i modified it and posted patches on sourceforge but in 2 years they didn't include my patch nor the other patches people had done...
          their activity in php is very good but i think there is not enough people working on the JSF integration.

          Using tinyMCE without the compressor is awfully slow...

          i separated the JSF compressor in a second file (java class).
          the modified MCE code is on their forum :
          http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=37705#p37705


          • 2. Re: Future xHTML Editor (wysiwyg)
            ronanker

            to just see all my draft files : http://www77.free.fr/tinyMCE/

            I've tryed to initialise tinyMCE only when needed by ajax but i didn't manage to do it, so i initialise it in the head of the page.
            my init code : http://www77.free.fr/tinyMCE/tinyMCE.inc.jsp
            this is a draft, i need help from tinyMCE team or RichFaces team to solve properly the load issues with different browsers...

            and then on the load of the page i open the editor for the detected zones...
            and on each ajax request à close them before and re-open them after...

            the ideal way should be :
            save the content when tinyMCE lose focus (i do it on each modification)
            close the editor only when the maped area is removed from the DOM.
            open the editor just after adding a wysiwyg area in the DOM.

            the functions i use to open/close/save editors are in
            http://www77.free.fr/tinyMCE/general.js

            • 3. Re: Future xHTML Editor (wysiwyg)
              ronanker

              here is an exemple of how i make it work in a page :
              http://www77.free.fr/tinyMCE/exemple.jsp

              • 4. Re: Future xHTML Editor (wysiwyg)
                ronanker

                As I see, many people want to have integrated wysiwyg editor in RichFaces, but not so many are ready to contribute in dev... just waiting for it.

                For now my work on this is enough for my company...
                If someone wants to go further on this, i'm watching this topic.

                When RichFaces Team will begin to work on this component I'm ready to collaborate and to share my knowledge on TinyMCE.

                is there already a begin of writing of the specs ? where can we read it, and exchange point of view on the way it will be integrated ? (especially for the way it'll be configured by default and how to let developper able to configure it)

                • 5. Re: Future xHTML Editor (wysiwyg)

                  This component is scheduled on the RichFaces 3.3.0.
                  We have just finished that phase of selecting the base software. It was a chose between TinyMCE and FCKEditor. The TinyMCE is chosen. The next phase will be a "Vision" document. Then "Requirements Specification".
                  The documents will be located here:
                  http://anonsvn.jboss.org/repos/richfaces/management/design/

                  • 6. Re: Future xHTML Editor (wysiwyg)
                    marinew

                    Hi RonanKER,

                    I just wanted to thank you for you work and your share, that helped me a lot having TinyMCE work in A4J re-rendered areas.
                    For those that would like to do the same, don't forget to upgrade to TinyMCE 3, as RonanKER said.

                    Marine

                    • 7. Re: Future xHTML Editor (wysiwyg)
                      ronanker

                      marinew > you're welcome :-)


                      Just a new post to inform that with the very last version of tinyMCE and JSP compressor, the include script works fine with all browsers i tested (FF 2 & 3 + IE 6 & 7)
                      we no longer need my pv_initMCE_GZ() and pv_initMCE(i) and initWYSIWYG()...
                      just have to load it like it's said in the doc...

                      Note : the tiny_mce_gzip.jsp still don't contains all necessary patch to work on all worldwide plateforms...

                      Remark : if you have specific css in your application, don't forget to patch the skin or to create yours and configute tinyMCE to use it... whereas it won't be a real wysiwyg...

                      • 8. Re: Future xHTML Editor (wysiwyg)
                        cw224

                        Hi RonanKER,

                        Let me also thank you for your work here. I was wondering if you could confirm what you are referring to as the 'very latest version' of tinyMCE. Do you mean? 3.1.1? http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12720

                        I was also wondering what you meant by " don't contains all necessary patch to work on all worldwide plateforms."

                        We have found that the simple TinyMCE editor does not display inside our ajax/richfaces panel in IE or Safari. It does work in FF2/FF3.

                        I'm trying to see if our testing is in synch with what you are seeing.

                        Thanks again!

                        • 9. Re: Future xHTML Editor (wysiwyg)
                          ronanker

                          Actually, what was important was the version of the tinyMCE JSP Compressor... I don't know in wich version of tinyMCE core they added the 'markDone' method, But it's since v1.0.4 of the compressor that it uses this method (in the js file).
                          for the tinyMCE core i'm on v3.1.1

                          • 10. Re: Future xHTML Editor (wysiwyg)
                            ronanker

                            for the patches that are not applyed yet, they concern rare cases but that exists :

                            - patch for output already open error -> need to remove the first '\r\n' of the file. this happen when jsf is not configured to remove useless returns at compile time.
                            -patch for the 'outStream' variable that may be in conflict depending the jsp context.

                            other patches i know seems to have been included exept one evolution that i dont use yet for the configuration of caching.

                            I also personnaly add my own patch that externalise java functions in a class and add logs support with log4j.

                            • 11. Re: Future xHTML Editor (wysiwyg)
                              ronanker

                              @Ilya Shaikovsky

                              I've just read http://anonsvn.jboss.org/repos/richfaces/management/design/Editor/ Func-Spec-Editor.doc (V1.0 2008-09-16)

                              it seams quite cool :-)
                              (is it here the right place to discuss this Initial draft ?)


                              we're using folowing very usefull plugins : "fullscreen,inlinepopups,paste"...

                              for 'inlinepopups' i supose it'll be re-implemented with RF modalpanel mechanism and included by default (FuncSpec-RF-CL-E-040-1.2 Editor popups)


                              In "FuncSpec-RF-CFR-E-010-1.0 Redefinition widjet parameters"
                              - does it mean that if you have 2 editors you have to write 2 times all init params ?
                              - will it support the presence of 2 different editors on the same page ?

                              We need to have a way to define our own default values... (web.xml ?)
                              in the case of 2 identical editors, no need to say it's better to instanciate tinyMCE js objet only once, i think for 2 different config you need to instanciate it twice


                              concerning the way tinyMCE is loaded, i suppose you're rewriting all the 'tinyMCE JSP Compressor'... :-) good work, have fun !

                              also you wish to implement later FileManager and ImageManager... very kind of you !


                              on "FuncSpec-RF-CL-E-050-1.2 Editor Skinnability"
                              I don't know exactly how you want to do this... as the editor is in an iframe it uses its own css, we can specify other css directory, for ex:"RF", and then inside have the original css modified with RF skinability...
                              but for exemple, in my own application, i've got 2 extra css file, one xcss generated css and one default css.
                              In my integration of tinyMCE, to be able to have a real WYSIWYG editor, i had to modify its css to include some lines of my general css files...
                              So, i need either a way of adding css file to tinyMCE, or perhaps you can make tinyMCE include the css of the page inside its iframe...


                              Ask me if you don't understand something i've writen :-)

                              Thanks in advance for all your work :-)

                              • 12. Re: Future xHTML Editor (wysiwyg)
                                jbalunas

                                Yup this is the perfect place to discuss this :-) My comments are below.

                                The plan afaik for the inlinepopups is the modalpanel.

                                Yes two editors on the same page should be supported. The editors will have default values for many of the parameters - if you want different values for different editors you would need to specify them.

                                I really like the idea of specifying your own default values! We should add that to the tag - Ilya, Nick - what do you thing?

                                FileManager and ImageManager will come later as that is a lot of work to get done. We want to get the initial editor out sooner than later so those are going to wait.

                                From what I can see the tinyMCE editor is not in an IFrame - can you expand on that?

                                Regards,
                                Jay

                                • 13. Re: Future xHTML Editor (wysiwyg)
                                  ronanker

                                   

                                  "jbalunas@redhat.com" wrote:
                                  From what I can see the tinyMCE editor is not in an IFrame - can you expand on that?


                                  When tinyMce construct the editor upon an object (ex:textarea), it hides the object and construct it just after in the dom...

                                  here is the generated dom (can differ a little due to config) :
                                  <textarea id="formPage:modifier:j_id_jsp_38221610_8pc25:message" name="formPage:modifier:j_id_jsp_38221610_8pc25:message" class="textarea wysiwyg" cols="75" rows="20" style="display: none;">
                                  <span id="formPage:modifier:j_id_jsp_38221610_8pc25:message_parent" class="mceEditor virageSkin">
                                   <table cellspacing="0" cellpadding="0" id="formPage:modifier:j_id_jsp_38221610_8pc25:message_tbl" class="mceLayout" style="width: 634px; height: 278px;">
                                   <tbody>
                                   <tr class="mceFirst">
                                   <td class="mceToolbar mceLeft mceFirst mceLast">
                                   ...
                                   </td>
                                   </tr>
                                   <tr class="mceLast">
                                   <td class="mceIframeContainer mceFirst mceLast">
                                   <iframe frameborder="0" id="formPage:modifier:j_id_jsp_38221610_8pc25:message_ifr" src='javascript:""' style="width: 100%; height: 232px;"/>
                                   </td>
                                   </tr>
                                   </tbody>
                                   </table>
                                  </span>
                                  


                                  as you can see there is an iframe for the editor part.
                                  and then inside the iframe the content of the editor is the content of Body tag :
                                  <html>
                                   <head xmlns="http://www.w3.org/1999/xhtml">
                                   <base href="http://virage.pm-dev.com/MonitorMakerWeb/reporter/saisie_projet/"/>
                                   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
                                   <link rel="stylesheet" mce_href="http://virage.pm-dev.com/MonitorMakerWeb/static/js/tiny_mce/themes/advanced/skins/virage/content.css" href="http://virage.pm-dev.com/MonitorMakerWeb/static/js/tiny_mce/themes/advanced/skins/virage/content.css"/>
                                   </head>
                                   <body class="mceContentBody" id="tinymce" dir="ltr">
                                   <p>Sample text</p>
                                   </body>
                                  </html>
                                  




                                  • 14. Re: Future xHTML Editor (wysiwyg)
                                    jbalunas

                                    Crap you are right - I was not looking at the generated source, just the raw source:-(

                                    Once I did I saw right away. This does complicate things especially the styling.

                                    Thanks for pointing that out.

                                    Sergey, Nick , and Ilya how will this effect styling and other aspects as RonanKER points out?

                                    Thanks,
                                    Jay

                                    1 2 Previous Next