CODEWITHSUNDEEP
grailsckeditorgrails-resources-plugin
ben3000
ben3000

Reputation: 4989

Grails resources not working with cache-busting CKEditor release (4.5.5+)

I am unable to get a Grails 2.5.2 application using the resources plugin to handle the cache-busting change made to CKEditor. The resources plugin is configured as follows:

grails.resources.adhoc.patterns = ['/js/*', '/images/*', '/css/*', '/plugins/*', '/thirdparty/*', '/templates/*']
grails.resources.adhoc.includes = ['/js/**', '/images/**', '/css/**', '/plugins/**', '/thirdparty/**', '/templates/**']

The CKEditor code is placed under app-dir/web-app/thirdparty/ckeditor and is currently at version 4.5.9. The cache-busting change was made in 4.5.5, and version 4.5.4 works perfectly with grails resources.

I get the following error in the console when running the app with 4.5.9:

GET resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe net::ERR_UNKNOWN_URL_SCHEME

It seems that the resources plugin is not coping well with values in ckeditor's editor.css file (a file served by the app points to app-dir/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD as http://localhost:8080/app-dir/static/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD). If I look at this file directly, it contains the following for the icons.png and icons_hidpi.png files, indicating that the resources plugin is incorrectly replacing the image file link (all but the first, actually) with a "resource:/..." url that shouldn't need to be there, and hence the console error. Curiously, it is only the icons.png and icons_hidpi.png files with their t parameter that get changed in this manner, other image files in the same editor.css file are left alone.

.cke_button__bold_icon {background: url(icons.png?t=a35abfe) no-repeat 0 -0px !important;}
.cke_button__italic_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -24px !important;}
.cke_button__strike_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -48px !important;}
.cke_button__subscript_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -72px !important;}

If I add the following configuration, the app runs and displays perfectly.

grails.resources.processing.enabled = false

If I use

grails.resources.mappers.cssrewriter.excludes = ['/thirdparty/ckeditor/skins/moono/**']

in an attempt to prevent resources from modifying ckeditor's editor.css file, nothing seems to change.

What can I do? I can't leave ckeditor at 4.5.4, as there is an interaction with it that I'm trying to fix. I'm already using the same configuration as recommended in another post, but that does not fix the problem. Disabling css rewriting altogether just breaks other plugins.

Upvotes: 0

Views: 347

Answers (1)

ben3000
ben3000

Reputation: 4989

The eventual solution (recommended by a colleague) is to exclude the specific CSS file(s) from being processed by grails resources:

resource url:"thirdparty/ckeditor/skins/moono/editor.css", exclude: "*"

This avoids affecting other files that were either unaffected by the upgraded CKEditor, or benefited from the processing done by grails resources.

Upvotes: 1

Related Questions