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

项目中需求要添加文章。第一个关键点是要选择一款好用的在线编辑器。谷歌了下，在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
    
    
    
    '
    
    
    
    ] ];
   
   
   
   

还有一点需要注意的是，我使用<h:outputText>无法识别html标签，查了下，只要将属性escape="false"即可。

本文参考：http://blog.sina.com.cn/s/blog_568e662301012cpa.html 

希望可以帮到需要的同学