2 Replies Latest reply on Dec 16, 2008 3:59 AM by Aleksandr Dubovsky

    RichEditor in BETA4 - issue?

    John Ament Master

      So beta4's my first attempt w/ the rich editor. I have previously been using tinymce in my application, but I've had an issue floating around that happens when turning a page into edit mode, the editor only pops up after refreshing the page. I decided to give this a try, since I figured the issue was w/ tinymce not picking up on the rerendering that's happening in JSF (which makes sense, since it's a detached operation).

      My original tinymce configuration is here:

      tinyMCE.init({
       mode : "textareas",
       theme : "advanced",
       editor_selector : "mceAdvanced",
       plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
       theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,formatselect,fontselect,fontsizeselect",
       theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,",
       theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
       theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_resizing : true
      });
      


      And I translated that into the follow editor definition on my facelet:

       <rich:editor id="body" value="#{topicManager.postComment.body}" theme="advanced">
       <f:param name="plugins" value="safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager" />
       <f:param name="theme_advanced_buttons1" value="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,formatselect,fontselect,fontsizeselect" />
       <f:param name="theme_advanced_buttons2" value="cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview," />
       <f:param name="theme_advanced_buttons3" value="tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen" />
       <f:param name="theme_advanced_buttons4" value="insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage" />
       <f:param name="theme_advanced_toolbar_location" value="top" />
       <f:param name="theme_advanced_toolbar_align" value="left" />
       <f:param name="theme_advanced_resizing" value="true" />
       </rich:editor>
      


      And it generates the following JS:

       <span class="value "><div class="rich-editor " id="comment:bodyDecoration:body"><textarea id="comment:bodyDecoration:bodyTextArea" name="comment:bodyDecoration:bodyTextArea" style="visibility: hidden"></textarea><script type="text/javascript">var tinyMceParams = {};
      tinyMceParams.theme = 'advanced';
      tinyMceParams.auto_resize = false;
      tinyMceParams.readonly = false;
      tinyMceParams.dialog_type = 'modal';
      if(!tinyMceParams.skin){
       tinyMceParams.skin = 'richfaces';
      }
      if(tinyMceParams.strict_loading_mode == null){
       tinyMceParams.strict_loading_mode = true;
      }
      tinyMceParams.plugins = 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager';
      tinyMceParams.theme_advanced_buttons1 = 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor,formatselect,fontselect,fontsizeselect';
      tinyMceParams.theme_advanced_buttons2 = 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,';
      tinyMceParams.theme_advanced_buttons3 = 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen';
      tinyMceParams.theme_advanced_buttons4 = 'insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage';
      tinyMceParams.theme_advanced_toolbar_location = 'top';
      tinyMceParams.theme_advanced_toolbar_align = 'left';
      tinyMceParams.theme_advanced_resizing = true;
      var richParams = {extScriptSuffix : '', extCssSuffix : '/DATB/eAGbo7-tNnT5DGkAEXoDrg__', useSeamText : false};
      
       new RichEditor('comment:bodyDecoration:body', richParams, tinyMceParams);</script></div>
       </span>
      


      Which I believe is ok. Except the editor doesn't render!

      Now if I remove my plugins line

      <f:param name="plugins" value="safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager" />


      The editor renders, but obviously without the plugins.

      Any ideas? Is there someway of adding these plugins that come out of the box w/ tinymce?