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"
下一篇: JSF参数传递--richfaces
推荐阅读
-
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
-
seam中使用富文本编辑器及显示富文本信息
-
在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
-
在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
-
在vue中使用quill-editor富文本编辑器(自定义工具栏、重写上传文件功能、工具栏中增加额外的功能按钮)
-
layedit富文本编辑器中如何添加显示源码功能(代码)
-
layedit富文本编辑器中如何添加显示源码功能(代码)
-
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)