在JSF2中使用编辑器ck-jsf-editor

最新推荐文章于 2020-05-23 16:51:28 发布

weixin_34080903

最新推荐文章于 2020-05-23 16:51:28 发布

阅读量160

点赞数

原文链接：https://my.oschina.net/chen7/blog/160055

版权

为什么80%的码农都做不了架构师？>>>

项目中需求要添加文章。第一个关键点是要选择一款好用的在线编辑器。谷歌了下，在JSF中还真有一款，ck-jsf-editor。

ck-jsf-editor不多介绍了，继承自ckeditor。下面讲讲用法：

先下载jar包，地址谷歌下，我用的是ck-jsf-editor-0.9.4.jar。将jar包添加到项目中后，直接就可以用了。添加域： xmlns:ck="http://code.google.com/ck-jsf-editor"，代码是：

<ck:editor value="#{xxx.xxx}" uiColor="aed0ea"/>。但是有个问题，显示的toolbar太多了，很多用不到，很占地方，还好这个编辑器是可以定制的。toolbar属性可选为full或者basic，如果两者都不满足，去修改jar包的配置文件config.js。

将jar包解压，找到config.js。我最后修改为：

  CKEDITOR.editorConfig  =   function ( config ) { config.toolbar  =   ' Full ' ; config.toolbar_Full  =  [ { name:  ' clipboard ' , items : [  ' Cut ' , ' Copy ' , ' Paste ' , ' PasteText ' , ' PasteFromWord ' , ' - ' , ' Undo ' , ' Redo '  ] }, { name:  ' editing ' , items : [  ' Find ' , ' Replace ' , ' - ' , ' SelectAll ' , ' - ' , ' SpellChecker ' ,  ' Scayt '  ] },  ' / ' , { name:  ' basicstyles ' , items : [  ' Bold ' , ' Italic ' , ' Underline ' , ' Strike ' , ' Subscript ' , ' Superscript ' , ' - ' , ' RemoveFormat '  ] }, { name:  ' paragraph ' , items : [  ' NumberedList ' , ' BulletedList ' , ' - ' , ' Outdent ' , ' Indent ' , ' - ' , ' Blockquote ' , ' CreateDiv ' ,  ' - ' , ' JustifyLeft ' , ' JustifyCenter ' , ' JustifyRight ' , ' JustifyBlock ' , ' - ' , ' BidiLtr ' , ' BidiRtl '  ] }, { name:  ' links ' , items : [  ' Link ' , ' Unlink ' , ' Anchor '  ] }, { name:  ' insert ' , items : [  ' Image ' , ' Flash ' , ' Table ' , ' HorizontalRule ' , ' Smiley ' , ' SpecialChar ' , ' PageBreak ' , ' Iframe '  ] },  ' / ' , { name:  ' styles ' , items : [  ' Styles ' , ' Format ' , ' Font ' , ' FontSize '  ] }, { name:  ' colors ' , items : [  ' TextColor ' , ' BGColor '  ] }, ]; config.toolbar_Basic  =  [ [ ' Bold ' ,  ' Italic ' ,  ' - ' ,  ' NumberedList ' ,  ' BulletedList ' ,  ' - ' ,  ' Link ' ,  ' Unlink ' , ' - ' , ' About ' ] ];};

读者可以根据自己的需求修改，full应该是：

 config.toolbar  =   ' Full ' ; config.toolbar_Full  =  [ { name:  ' document ' , items : [  ' Source ' , ' - ' , ' Save ' , ' NewPage ' , ' DocProps ' , ' Preview ' , ' Print ' , ' - ' , ' Templates '  ] }, { name:  ' clipboard ' , items : [  ' Cut ' , ' Copy ' , ' Paste ' , ' PasteText ' , ' PasteFromWord ' , ' - ' , ' Undo ' , ' Redo '  ] }, { name:  ' editing ' , items : [  ' Find ' , ' Replace ' , ' - ' , ' SelectAll ' , ' - ' , ' SpellChecker ' ,  ' Scayt '  ] }, { name:  ' forms ' , items : [  ' Form ' ,  ' Checkbox ' ,  ' Radio ' ,  ' TextField ' ,  ' Textarea ' ,  ' Select ' ,  ' Button ' ,  ' ImageButton ' ,  ' HiddenField '  ] },  ' / ' , { name:  ' basicstyles ' , items : [  ' Bold ' , ' Italic ' , ' Underline ' , ' Strike ' , ' Subscript ' , ' Superscript ' , ' - ' , ' RemoveFormat '  ] }, { name:  ' paragraph ' , items : [  ' NumberedList ' , ' BulletedList ' , ' - ' , ' Outdent ' , ' Indent ' , ' - ' , ' Blockquote ' , ' CreateDiv ' ,  ' - ' , ' JustifyLeft ' , ' JustifyCenter ' , ' JustifyRight ' , ' JustifyBlock ' , ' - ' , ' BidiLtr ' , ' BidiRtl '  ] }, { name:  ' links ' , items : [  ' Link ' , ' Unlink ' , ' Anchor '  ] }, { name:  ' insert ' , items : [  ' Image ' , ' Flash ' , ' Table ' , ' HorizontalRule ' , ' Smiley ' , ' SpecialChar ' , ' PageBreak ' , ' Iframe '  ] },  ' / ' , { name:  ' styles ' , items : [  ' Styles ' , ' Format ' , ' Font ' , ' FontSize '  ] }, { name:  ' colors ' , items : [  ' TextColor ' , ' BGColor '  ] }, { name:  ' tools ' , items : [  ' Maximize ' ,  ' ShowBlocks ' , ' - ' , ' About '  ] } ]; config.toolbar_Basic  =  [ [ ' Bold ' ,  ' Italic ' ,  ' - ' ,  ' NumberedList ' ,  ' BulletedList ' ,  ' - ' ,  ' Link ' ,  ' Unlink ' , ' - ' , ' About ' ] ];