poornerd

my thoughts on programming and other nerdy stuff

How to integrate the Aloha Wysiwyg Editor with Play! Framework

| 4 Comments

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.

4 Comments

  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.

Leave a Reply

Required fields are marked *.