4 Replies Latest reply: Aug 26, 2011 6:16 AM by Juan Gonzalez RSS

Editor: detailed configuration with JSON

Lukáš Fryč Master

Hi guys,

 

I'm thinking about making editor configurable by passing initial configuration as facet.

 

For example you can customize toolbar in following way:

 

<rich:editor id="editor" value="#{editor.value}">
    <f:facet name="config">
        "toolbar": "MyToolbar",
        "toolbar_MyToolbar": [
            { "name": "document", "items" : [ "NewPage","Preview" ] },
            { "name": "clipboard", "items" : [ "Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo" ] },
            { "name": "editing", "items" : [ "Find","Replace","-","SelectAll","-","Scayt" ] },
            { "name": "insert", "items" : [ "Image","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak"
                ,"Iframe" ] },
                "/",
            { "name": "styles", "items" : [ "Styles","Format" ] },
            { "name": "basicstyles", "items" : [ "Bold","Italic","Strike","-","RemoveFormat" ] },
            { "name": "paragraph", "items" : [ "NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote" ] },
            { "name": "links", "items" : [ "Link","Unlink","Anchor" ] },
            { "name": "tools", "items" : [ "Maximize" ] }
        ]
    </f:facet>
</rich:editor>

 

Warning: in the example above, there are no double-quotes as in valid JSON format, I just can't make it to display properly here

 

This way, user can precisely configure any possible property of CKEditor available,

 

however rich:editor requires JSON to be provided, not plain JavaScript object.

 

This leads into necessity modify all of the examples from CKEditor Documentation slightly ([1], see Toolbar Customization for comparison) .

 

I was initially trying to achieve that examples from CKEditor documentation might be used without modifications, but still this solution looks more clear for me than trying to wrap all the configuration either by attributes, facets or subcomponents.

 

[1] http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

 


  • 1. Re: Editor: detailed configuration with JSON
    Juan Gonzalez Newbie

    Hi Lukás,

     

     

    Can be EL expressions be inside f:facet? (for example: requestContextPath for config.contentsCss).  In that case, seems ok for this possibility.

     

    Also, can those properties be with quotes? (i.e.: config.font_names property).

     

    Thanks!

  • 2. Re: Editor: detailed configuration with JSON
    Lukáš Fryč Master

    Hi Juan, yes, EL could be surely evaluable in the config facet.

     

     

    Actually we have discussed with Brian on irc.freenode.net#richfaces, he suggested to allow definition in plain JavaScript instead of JSON.

     

    Initial thoughts on using JSON were avoiding JavaScript which have to be evaluated using eval() on the client side and thus gives space for script injection. JSON is more strict here, since it allows only primitive types and it is validated during parsing using $.parseJSON().

     

    However Brian argued that this is responsibility for developer to check the contents when interpolated config facet,

    and I'm adding that CKEditor have some options which takes functions as value and it would not be possible with JSON.

     

    That's why I have decided to reimplement to plain JavaScript configuration.

  • 3. Re: Editor: detailed configuration with JSON
    Lukáš Fryč Master

    Configuration of editor will be possible by simply passing JavaScript with EL expr. interpolated:

     

     

    <rich:editor id="editor" value="#{editor.value}">
        <f:facet name="config">
            skin: "#{editor.skin}",
            toolbar: "MyToolbar",
            toolbar_MyToolbar:
                [
                          { name: 'document', items : [ 'NewPage','Preview' ] },
                          { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                          { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
                          { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
                             ,'Iframe' ] },
                            '/',
                          { name: 'styles', items : [ 'Styles','Format' ] },
                          { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
                          { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
                          { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
                          { name: 'tools', items : [ 'Maximize' ] }
                ]
        </f:facet>
    </rich:editor>
    
  • 4. Re: Editor: detailed configuration with JSON
    Juan Gonzalez Newbie

    Wow, seems pretty good.

     

    Thanks!