technologist, entrepreneur, vision­ary, programmer

How to integrate the Aloha Wysiwyg Editor with Play! Framework


UPDATE: code checked in on github: https://github.com/poornerd/play-aloha

play-alohaI am constantly needing to update static content in Templates in my Play! Framework project, so I decided to integrate the Aloha Editor, an HTML5 WYSIWYG Editor.

It is free to use, and they offer an example of integration an saving with a POST to the server on this page: http://www.aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php

Basically all I had to do in the frontend was integrate the editor as described, and add a class “editable” to the element that should be editable.

<h1 class="editable" id="c1title">Example headline.</h1>

Then I had to create a POST action in my controller:

public static Result aloha() {
   final Map<String, String[]> values = request().body().asFormUrlEncoded();
   final String content = values.get("content")[0];
   final String contentId = values.get("contentId")[0];
   final String pageId = values.get("pageId")[0];
   System.out.println("pageId:" + pageId);
   System.out.println("contentId:" + contentId);
   System.out.println("Content:" + content);
   // save the content or whatever here...
   return ok();

Then I modified the aloha-save.js from the Aloha Example (which I copied from the above mentioned website), to post to the route for my action instead of save.php.

That was pretty much it. Make sure you add an id to the HTML elements so you can tell which on is which. The pageId ends up being the URL of the page, so that is not always helpful.

If you want to find out what I am doing with this, keep tuned to this blog or follow me on twitter!

If you have read this far, you may as well follow me on Twitter:

Author: poornerd

Tech­nol­o­gist, Entre­pre­neur, Vision­ary, Pro­gram­mer :: Grad­u­ated from USC (Uni­ver­sity of South­ern Cal­i­for­nia) with a degree in Com­puter Sci­ence. After 10+ years of free­lance con­sult­ing and pro­gram­ming, he co-founded Site­Force AG eBusi­ness Solu­tions in 1999 in Munich (München), Ger­many.


  1. Pingback: Integrating the Aloha Wysiwyg Editor with Play! Framework | Aloha Editor – HTML5 Editor

  2. Thank you Manuel from the http://aloha-editor.org/ Blog for writing about this post!

  3. Nice post, put authentication on top of this and that will be the base for a really good ECMS!. BTW, what is the chrome theme that your are using in your screenshot?

  4. Adolfo, I have no idea what theme that is (for Chrome, yes) or how to tell which one it is. I think it was from the Google Developer conference 2 years ago…

    I am working on more with regards to saving… when I get some more figure out, I will post it on the blog.

  5. Very nice tool and very useful.

    I have been trying to apply to play 2.2.2 project but not able to get it working for the static contents from the message resources. It works fine for the static content directly in the scala.html pages.

    I could download your code and try it out and it works fine. But, when I integrate with my code, it does not work for the static content from the messages file. One difference I observed is that the tag that is used to render the messages content is getting id and classes automatically in your code but not in my code.
    How do I debug this and fix it ?
    Also, I am already using jquery and bootstrap js versions that are latest. Can this be an issue?

Leave a Reply

Required fields are marked *.