Configuring CK Editor plugin in Grails

Question

How do we configure the CK Editor plugin in Grails? I'd like to use a couple of add-ons and customise the skin (theme) as well. The documentation by Stefano Gualdi, which seems to be the most prominent material, isn't too helpful. Also, I did find a builder which will let us customize (http://ckeditor.com/builder), but I couldn't find anything similar for CK Editor in Grails.

Also, the builder gave the impression that I customize my package according to my needs, download it, and copy it onto the location in Grails. Is that how it's done, or do we start off with the basic build only, and somehow connect with the add-ons?

In particular, I'm looking for options like Auto-save, File upload, etc. I'm guessing add-ons are the way to go.

Answer 1

The CKeditor repo in grails site old one and is of version 4.4.1.0 and it needs upgrade. If you need to add to plugins in your grails project. This is what I have to add custom config. I had referred to some site. But I forgot. Anyways, here's my workaround. Sorry for not having line breaks, as stackoverflow seems to ignore it.

1. Place ckeditor compile ":ckeditor:4.4.1.0" under BuildConfig.groovy.

2. Place your resources under /web-app/ckeditor/plugins/ and /web-app/ckeditor/skins/. In my case divarea, lineutils, dialog folders are placed in the plugins and office2013 in the skins folder.

3. Place ckeditor specific config in Config.groovy. Code underneath is from the default ckeditor plugin with config part modified. Sample code:

   ckeditor { config = "/ckeditor/ckeditorconfig.js" skipAllowedItemsCheck = false defaultFileBrowser = "ofm" upload { basedir = "/uploads/" overwrite = false link { browser = true upload = true allowed = ['jpg', 'gif', 'jpeg', 'png'] denied = ['html', 'htm', 'php', 'php2', 'php3', 'php4', 'php5', 'phtml', 'pwml', 'inc', 'asp', 'aspx', 'ascx', 'jsp', 'cfm', 'cfc', 'pl', 'bat', 'exe', 'com', 'dll', 'vbs', 'js', 'reg', 'cgi', 'htaccess', 'asis', 'sh', 'shtml', 'shtm', 'phtm'] } image { browser = true upload = true allowed = ['jpg', 'gif', 'jpeg', 'png'] denied = [] } flash { browser = false upload = false allowed = ['swf'] denied = [] } } }

4. Create custom static resource in your view to mimic javascript file. Here's mine located in /views/staticjs/ckeditorconfig.js. Sample Code for this file:

   <%@ page contentType="text/javascript;charset=UTF-8" %> CKEDITOR.plugins.addExternal( 'divarea', '${resource(dir: '/ckeditor/plugins/divarea/')}' ); CKEDITOR.plugins.addExternal( 'lineutils', '${resource(dir: '/ckeditor/plugins/lineutils/')}' ); CKEDITOR.plugins.addExternal( 'dialog', '${resource(dir: '/ckeditor/plugins/dialog/')}' ); CKEDITOR.editorConfig = function( config ){
   config.extraPlugins = 'enterkey,divarea,dialog; config.skin = 'office2013,${resource(dir:"/ckeditor/skins/office2013/")}'; config.removePlugins="elementspath,resize"; config.resize_enabled="false"; config.toolbar_custom = [ [ 'Styles', '-', 'FontSize','-', 'Bold', 'Italic', 'Underline'] ] };

5. Create an entry in UrlMappings.groovy for this file.

   "/ckeditor/ckeditorconfig.js"(view:'/staticjs/ckeditorconfig')

I hope you can configure your required plugins afterwards.