Liferay: Customize FCK Editor

How to customize the tool bar

There are four built-in tool bar sets. These are configured in \html\js\editor\fckeditor\fckconfig.jsp. They are:

  1. liferay
  2. liferay-article. This is used for web content.
  3. edit-in-place
  4. email

To see which tool bar is being used, look at the toolbarSet variable in the iframe link that is importing the editor.

Each of the tool bar sets is customized as a javascript array of arrays. Each element in each array corresponds to a tool on the bar. The buttons are laid out from left to right and top to bottom, but there is a separator between the last element of one array and the first element of the next. Tool bar buttons can be added or removed by adding or removing elements from the array of arrays.

Adding a custom style to the style drop-down

As in any text editor, the user can highlight a snippet of text and change the style using the style drop-down. There are some built-in styles (normal, heading 1, computer code, etc) but custom styles can be specified as well.

  1. Add style in fckstyles.xml. This file contains the list of styles. Add a new Style element with:
    • name = the name of the style in the drop-down.
    • element = “div”. element can be either a built-in html element or a div. Pick div, because the html elements are already defined.
    • Attribute element with name=”class” and value equal to the name of a CSS class that will be applied to this style.
  2. Add new CSS style

You’ll need to create the CSS style for the class defined above. All liferay styles are imported through css.jsp. As far as I can tell, this just wraps main.css. Add the new style to custom.css (which is already imported by main.css).

Writing a plug-in

Detailed explanation coming….

  1. Decide on plug-in name
  2. Create sub-directory of plug-in name in plugins sub-directory of _fckeditor/editor
  3. See example for RegisterItem, RegisterCommand, etc. in a file called fckplugin.js. The command method does the work of the plug-in.
  4. In fckconfig.jsp, add plug-in commands to tool bar sets, and call FCKConfig.Plugins.Add for the plug-in.

External Links

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

One thought on “Liferay: Customize FCK Editor

  1. Pingback: Array | i-proving.com

Leave a Reply