my thoughts on programming and other nerdy stuff

How to integrate the Aloha Wysiwyg Editor with Play! Framework


UPDATE: code checked in on github: https://​github​.com/​p​o​o​r​n​e​r​d​/​p​l​a​y​-​a​l​oha

play-alohaI am con­stantly need­ing to update sta­tic con­tent in Tem­plates in my Play! Frame­work project, so I decided to inte­grate the Aloha Edi­tor, an HTML5 WYSIWYG Editor.

It is free to use, and they offer an exam­ple of inte­gra­tion an sav­ing with a POST to the server on this page: http://​www​.aloha​-edi​tor​.org/​h​o​w​t​o​-​s​t​o​r​e​-​d​a​t​a​-​w​i​t​h​-​a​l​o​h​a​-​e​d​i​t​o​r​-​a​j​a​x​.​php

Basi­cally all I had to do in the fron­tend was inte­grate the edi­tor as described, and add a class “editable” to the ele­ment that should be editable.

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

Then I had to cre­ate 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 mod­i­fied the aloha-save.js from the Aloha Exam­ple (which I copied from the above men­tioned web­site), 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 ele­ments 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 fol­low me on twitter!

If you have read this far, you may as well fol­low me on Twit­ter:

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​-edi​tor​.org/ Blog for writ­ing about this post!

  3. Nice post, put authen­ti­ca­tion 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 Devel­oper con­fer­ence 2 years ago…

    I am work­ing on more with regards to sav­ing… when I get some more fig­ure out, I will post it on the blog.

  5. Very nice tool and very useful.

    I have been try­ing to apply to play 2.2.2 project but not able to get it work­ing for the sta­tic con­tents from the mes­sage resources. It works fine for the sta­tic con­tent directly in the scala.html pages.

    I could down­load your code and try it out and it works fine. But, when I inte­grate with my code, it does not work for the sta­tic con­tent from the mes­sages file. One dif­fer­ence I observed is that the tag that is used to ren­der the mes­sages con­tent is get­ting id and classes auto­mat­i­cally in your code but not in my code.
    How do I debug this and fix it ?
    Also, I am already using jquery and boot­strap js ver­sions that are lat­est. Can this be an issue?

Leave a Reply

Required fields are marked *.