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!