We are using rich editors, and the FCKeditor was a no-brainer. I was delighted to find out that it was available as a grails plugin. I pulled it into my project, and defining an editor in one of my views was as hard as this:
<fckeditor:editor
id="materials"
name="materials"
width="70%"
height="200"
toolbar="Standard"
fileBrowser="default"
value="${fieldValue(bean:mybean, field:'materials').decodeHTML()}"> ${fieldValue(bean:contentInstance, field:'materials').decodeHTML()}
</fckeditor:editor>
The important parts here are:
- toolbar: This gives you the ability to choose the set of tools for your editor. More on this one later
- value: You can identify the preset value. If this is html that was saved, then you must include the decodeHTML() call or else the value you will see is raw html.
The rest is pretty much boilerplate - obviously the height/width will depend on your site.
To customize the contents of your toolbar, you will need to specify a custom configuration file, which is in the form of javascript. Your gsp page must contain:
<fckeditor:config CustomConfigurationsPath="${resource(dir:'js',file:'myconfig.js')}"/>
This file looks like this:
FCKConfig.ToolbarSets["ed-limited"] = [
['Cut','Copy','Paste'],
['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
'/',
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link'],
//'/',
['Style'],
['Table','Image','SpecialChar'],
['About']
];
You can define as many of these as you want. See this link for configuration details.
Once you defined this, you can simply update the toolbar attribute on the FCKeditor to point to your new toolbar, in this case 'ed-limited'.
One big gotcha is that this uses 2.6 currently, while the newest stable version seems to be 3.1.