FCK editor
This plugin is tested and working for Grails 0.6. I have yet to get it working in 1.0-RCx.
The FCK editor plugin lets you insert the best (my opinion) WYSIWYG text editor into your sites. On installation you will be able to put <fck:editor/> tags into your pages wherever you would like a FCK editor to appear. The installation comes configured so that you can upload images, flash movies and even files to your web application for use in your FCK editor articles.
Getting Started
type "grails install-plugin fck-editor", once installed go into the projects grails-app/confg/Config.groovy file and add a line like "web.app.context.path=<context>" where context is the name of your web app. This is a normal J2EE web app context. If you named your project "junk" then your web app context will likely be "junk".
Now you can insert a <fck:editor/> tag. Try putting this into your index.gsp file : "<fck:editor width="600" height="400">Hi All!!!</fck:editor>". If you view this page in a browser you will see the editor with the text "Hi All!!!" written in. If you were wanting to preload the editor in a page with some content you would do something like <fck:editor>${an_article}</fck:editor>, where 'an_article' is a variable (likely) created in the controller for the page.
Configuring the Editor
By convention the editor will be configured to put all uploads into a folder named "uploads". This folder will be located in the root folder of your web application. Note this requires that you are expanding .war files.
It is likely you will want to separate configurations for development, testing and production. In production it is likely you would use Apache to serve static content such as images, css, javascript, flash, etc. In this case you will need to configure the FCK editor plugin so that it knows where to put uploads, and how to serve them. Here is an example of fully configuring the plug in so that it works with Apache:
environments {
development {
web.app.context.path = "blueleftistconstructor/"
}
test {
web.app.context.path = ""
fcked.upload.dir = "/Users/ottaway/webmedia/"
fcked.web.file.path = "/uploads/"
}
production {
web.app.context.path = ""
fcked.upload.dir = "/webmedia/"
fcked.web.file.path = "/uploads/"
}
}
This configuration is using the default "upload" folder in the web app during development testing, but then using a defined disk location for uploads during testing and production phases. Here is a break down of the configuration parameters:
- web.app.context.path: this would be the context of your J2EE web application. This is the only required parameter. Note that you must end this string with a '/' character!
- fcked.upload.dir: this would be the folder where uploaded files go. If you prefix a '/' to this stirng you are specifying an absolute path on disk. Otherwise the path you specify will be relative to your installed web apps folder on disk. Note that you must end this string with a '/' character!
- fcked.web.file.path: this is the URL which points to the upload folder. If you are defining a relative upload dir then this would be the same value as fcked.upload.dir. If your upload folder is outside of the web application, then you will have to configure this. It would be likely you are aliasing the uploads folder using Apache, and mapping it to this URL. In the example config above, for produciton, I use the absolute path "/webmedia/" on disk. In this case I have Apache alias this folder to the URL "/uploads/". Note that you must end this string with a '/' character!
Using and Creating A Custom Toolbar
This plugin comes installed with two toolbar profiles. The first and default toolbar contains a lot of options. The second is the 'basic' toolbar which contains just about zilch. If you want to use the basic toolbar use a tag like <fck:editor toolbar="Basic" />. The toolbar attribute will activate the toolbar you speicfy.
Now you might want to put together one or more custom toolbars. You should edit the 'plugins/fck-editor-0.1/web-app/js/fckconfig.js' file to make new toolbars. You will see the default and basic toolbar configuration in this file. If you check out this page for info on custom toolbar config: http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Toolbar

