RF4 Editor

Version 10

    Attributes

    4.1.0.M1

    • standard UIInput attributes (see faces-config.xml)
      • rendered, binding, immediate, required, validator, valueChangeListener, converter, value, style, styleClass
    • toolbar = { basic, full, <custom> }
    • readonly
    • tabindex
    • width
    • height
    • textareaStyle, textareaClass
    • editorStyle, editorClass

     

    4.1.0.M2

    • lang
    • skin
    • config
      • CKEditor JavaScript configuration, see CKEditor docs and Configuration sample

     

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

    [2] https://github.com/richfaces/dev-examples/blob/develop/input-demo/src/main/webapp/examples/editor.xhtml

     

     

    Future

    • maximized
    • editMode

    Client-Side Events

    • all of the actions should be exposed externally as JSF behaviors may react on them

     

    <rich:editor value="#{bean.editorValue}">
         <!-- autosave on change -->
         <a4j:ajax event="change" />
              <a4j:attachQueue delay="30000" />
         </a4j:ajax>

         <a4j:ajax event="save" action="#{bean.save}" />
    </rich:editor>
     

    4.1.0.M1

    • oninit
      • fired when editor is initialized and ready
    • onfocus
    • onblur
    • onchange
      • fired after blur only if editor is dirty (the same as for text input/textarea)

     

    4.1.0.M2

    • ondirty
      • fired when editor content is changed by any available action (key press, button action, paste, etc.)

     

    Future

    • onresize
    • oneditmodechange

    JavaScript API

     

    • component exposes API for triggering actions on editor itself

     

    #{rich:component('editor')}.save() 

     

    <rich:componentControl event="click" target="editor" operation="save" /> 

    4.1.0.M1

    • getValue()
    • setValue(newValue)
    • getEditor() - returns associated CKEditor instance
    • getInput() - returns textarea
    • focus()
    • blur()
    • isFocused()
    • isDirty() - resets on blur and on setValue or on ajax update
    • isValueChanged() - reset on setValue or on ajax update
    • isReadonly()
    • setReadonly()

     

    Future

    • getMode() = {wysiwyg, source)
    • getWidth()
    • getHeight()
    • selection API
    • etc.

    Popups Customization

    Future

    • most of the editor implementations bundles own modal panels for attaching files, setting options, etc.
    • provide events and callbacks to allow reimplementing them

    Editor Settings

     

    4.1.0.M1

    • only toolbar = { basic, full } provided

    4.1.0.M2

    • attribute @config added
      • check CKEDitor docs or sample for detailed configuration

     

    Alternative formats

     

    • use JSF converters to convert to alternative formats, no proprietary attributes (like useSeamText)

     

    Skinning

     

    4.1.0.M2

    • default editor skin called 'richfaces' fitting to the RichFaces skinning (including editor popups and dialogs)
    • attribute @skin for changing skin: richfaces (default), kama, v2, office2003

     

    Mobile Support

     

    4.1.0.M2

    • simple textarea used as editor on mobiles
    • editor resources not loaded on mobile devices

     

    Optimizations

    4.1.0.M1

    • editor is initialized after complete page load, size fits to original textarea
      • delay before initialization of editor, but do not block interactivity of the page

     

    4.1.0.M2

    • mandatory resources are pre-loaded on @JsfResource basis

     

    Future

    • editor resources will be compressed and will be possible to merge them into single files per type (CSS, JavaScript, images)