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)