Ckeditor for T5.4 complete with code sample

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.