seam中使用富文本编辑器及显示富文本信息

在seam中使用富文本编辑器可以采用richfaces editor组件，rich:editor组件中的功能已经是相当的完美，并且可以根据需要定制需要哪些工具条。

 

<rich:editor>是完全基于TinyMCE网页，它基于Javascript HTML所见即所得编辑器控件，并且支持TinyMCE所有的功能。<rich:editor>改编了TinyMCE编辑器用于JSF环境，并增加了一些实用能力。

 

1、引用该组件非常简单，前提是你的应用已经集成了richfaces，选择部分工具条功能具体代码如下：

     <rich:editor id="editValue" value="#{edit.editValue}"

                theme="advanced" language="ch" width="740" height="350" >
                     <f:param name="theme_advanced_toolbar_location" value="top"/>
                     <f:param name="theme_advanced_toolbar_align" value="left"/>
     </rich:editor>

     说明：

     1. TinyMCE提供的大部分选项可利用<f:param>标签被应用。

         语法很简单："name"属性应该包含该选项，"value"属性指派某些值给该选项。

     2. language="ch"表示选择简体中文，默认是英文 en。

         如果想切换其他语言可以从richfaces-ui.jar包下查找，具体的路径如下：

         richfaces-ui-3.3.1.GA.jar\org\richfaces\renderkit\html\scripts

 

 

2、当在富文本编辑器输入内容后，需要保存到数据库或其他存储设备供其他

   ui页面展现其数据。

   Seam 提供了 <s:formattedText/> 控件来显示符合 Seam Text 语言的格式化文本。   

   Seam Text 是用一个基于 ANTLR 的语实现 法分析器来 的。

   但你不需要知道 ANTLR就能方便地使用它了。 

   通过<s:formattedText/> 控件就可以将上述的富文本格式化产生相对应的html页面。

   具体的实现代码如下：

   <s:formattedText value="#{edit.editValue}" />

 

   如果不使用<s:formattedText/> 控件，还可以使用如下代码实现，效果是一样的：

   <h:outputText value="#{edit.editValue}" escape="false"></h:outputText>

 

 

 

rich:editor具体参数列表：

 

 

1.mode: "textareas" 
2.theme: "advanced" 
3.plugins: "safari,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" 
4.theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect" 
5.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,|,forecolor,backcolor" 
6.theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen" 
7.theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak" 

8.theme_advanced_toolbar_location: "top" 
9.theme_advanced_toolbar_align: "left" 

 

 

 

评论

1 楼 驭乐MJ 2014-08-18  

嗯，学习了，，建议去richFaces的官网去看一下，那里有演示和源代码，并且讲解的也比较好。