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:
- liferay-article. This is used for web content.
To see which tool bar is being used, look at the toolbarSet variable in the iframe link that is importing the editor.
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.
- 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.
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….
- Decide on plug-in name
- Create sub-directory of plug-in name in plugins sub-directory of _fckeditor/editor
- See example for RegisterItem, RegisterCommand, etc. in a file called fckplugin.js. The command method does the work of the plug-in.
- In fckconfig.jsp, add plug-in commands to tool bar sets, and call FCKConfig.Plugins.Add for the plug-in.