Hi Guys, I do not have a blog or time to create one atm, but I'd like to
share the code to create a ckeditor incase anybody else wanted to use it.
Start by downloading ckeditor from ckeditor.com and install it in
META-INF/modules. I added another directory for vendor which is where I
installed the ckeditor folder and it's code base.
META-INF/modules/vendor/ckeditor/ "ckeditor code base goes here"
in modules I added a script to load ckeditor with requirejs like so.
META-INF/modules/ckeditor-config.js
requirejs.config({
shim: {
'ckeditor-jquery': ['jquery', 'ckeditor-core']
},
paths: {
'ckeditor-core': 'vendor/ckeditor/ckeditor',
'ckeditor-jquery': 'vendor/ckeditor/adapters/jquery'
}
});
define(["jquery", "ckeditor-jquery"], function($) {
init = function(spec) {
$('#' + spec.id).ckeditor();
};
return init;
});
Now create a mixin CKEditor.java
public class CKEditor {
@InjectContainer
private Field field;
@Inject
private JavaScriptSupport javaScriptSupport;
public void afterRender() {
JSONObject json = new JSONObject();
json.put("id", field.getClientId());
javaScriptSupport.require("editor").with(json);
}
}
add to your textarea component, mixins="ckeditor"
Add a request filter to handle the assets, "based on Thiagos work"
public class CkeditorRequestFilter implements RequestFilter {
/**
* Folders containing WYMeditor assets.
*/
final private static String[] FILE_FOLDER = {"/skins/",
"/contents.css", "/plugins/"};
final private AssetSource assetSource;
/**
* Single constructor of this class.
*
* @param assetSource an {@link AssetSource}.
*/
public CkeditorRequestFilter(AssetSource assetSource) {
super();
this.assetSource = assetSource;
}
public boolean service(Request request, Response response,
RequestHandler handler) throws IOException {
String path = request.getPath();
boolean handled = false;
// we only handle requests for ckeditor asset URLs and which
weren't redirected already
if (path.contains("/vendor/ckeditor") &&
request.getParameter("redirected") == null) {
for (String folder : FILE_FOLDER) {
if (path.contains(folder)) {
// extract the ckeditor asset being requested.
path = path.substring(path.indexOf('/',
path.indexOf("/modules.gz/") + 1));
// find its location in the classpath.
String location = "/META-INF/modules" + path;
// create an Asset pointing to it.
Its URL will contain the right checksum
// for this file
Asset asset = assetSource.getClasspathAsset(location);
// we create the redirection target
URL with "/?redirected" in the end
// so we can spot and avoid redirection infinite loops.
final String redirectionUrl = asset.toClientURL() +
"/?redirected";
// finally, we redirect.
response.sendRedirect(redirectionUrl);
handled = true;
break;
}
}
}
// if we didn't redirect, we pass this request to the next
RequestFilter in the pipeline
return handled ? handled : handler.service(request, response);
}
}
Lastly, add a request filter to your app module and create an
ClasspathAssetAliasManager
public void contributeRequestHandler(OrderedConfiguration<RequestFilter>
configuration,
@Local RequestFilter filter) {
configuration.addInstance("ckeditor", CkeditorRequestFilter.class);
}
public static void
contributeClasspathAssetAliasManager(MappedConfiguration<String, String>
configuration) {
configuration.add("ck", "META-INF/modules/vendor");
}
Feel free to improve or use on a blog, the request filter may not be 100%
correct, but it does work without issue.
