RichEditor in BETA4 - issue?
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?
