Editor: detailed configuration with JSON

[lfryc]

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

[juangon]

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!

[lfryc]

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.

[lfryc]

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>

[juangon]

Wow, seems pretty good.

Thanks!