CKEditor Plugin for Alfresco Share forms

2011-05-11

Alfresco Share use as standard TinyMCE for inline editing of html files. I needed to customize the editor for a project, but the TinyMCE editor used has some specific Alfresco customizations. Instead trying to understand the Alfresco code, I started from scratch and used the CKEditor, ckeditor.com.

Image

Functionality

  • All standard functionality in CKEditor.
  • Loading of custom configuration files
  • Insert images directly form Alfresco Share site

For form in Alfresco Share it is easy to create new controls. In this case you just tell Share form to use the new control

<appearance>
   <field id="cm:content">
      <control template="/org/alfresco/components/form/controls/ckeditor.ftl">
         <control-param name="forceEditor">true</control-param>
      </control>
   </field>
</appearance>

The actual control including source code can be downloaded from Share Extras project. More on how to configure forms on Alfresco Wiki
To install, copy the file ckeditor-form-control-0.1.jar to tomcat/webapps/share/WEB-INF/lib. Then change the form definitions as outlined above or copy the file ckeditor-config-custom.xml (remove .sample file ending) to tomcat/shared/classes/alfresco/web-extension and restart.

If you would like to use custom configuration file you can tell the control what config file to load with

<control-param name="settingsfile">components/editors/ckeditor/my-config.js</control-param>

The path should start without / and point to the location where you put your file. If you create a nice config file I can include it as an option file if you send it to me. Planning to add som custom config files in the future. More on how to configure CKEditor.

Image

To browse for images, click “browse on server” and you will get a list of thumbnails. I based it on the Images dashlet, so of course you can click on an image to get a large preview. To select an image, click on the filename.