---
title: "How to integrate the Aloha Wysiwyg Editor with Play! Framework"
date: 2013-04-26T08:50:38+00:00
author: "poornerd"
tags: ["aloha-editor", "wysiwyg"]
canonical: https://www.poornerd.com/2013/04/26/integrating-the-aloha-wysiwyg-editor-with-play-framework/
source: Raw Markdown twin of the HTML article; content is the original source.
---
**UPDATE: code checked in on github: <a href="https://github.com/poornerd/play-aloha" onclick="javascript:pageTracker._trackPageview('/outbound/article/github.com');" target="_blank">https://github.com/poornerd/play-aloha</a>**

[<img class="alignleft size-full wp-image-280" alt="play-aloha" src="https://www.poornerd.com/wp-content/uploads/2013/04/play-aloha.jpg" width="1024" height="1022" srcset="https://www.poornerd.com/wp-content/uploads/2013/04/play-aloha.jpg 1024w, https://www.poornerd.com/wp-content/uploads/2013/04/play-aloha-150x150.jpg 150w, https://www.poornerd.com/wp-content/uploads/2013/04/play-aloha-300x300.jpg 300w" sizes="(max-width: 1024px) 100vw, 1024px" />](https://www.poornerd.com/wp-content/uploads/2013/04/play-aloha.jpg)I am constantly needing to update static content in Templates in my Play! Framework project, so I decided to integrate the <a href="http://www.aloha-editor.org/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.aloha-editor.org');" target="_blank">Aloha Editor</a>, 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: <a href="http://www.aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.aloha-editor.org');" target="_blank">http://www.aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php</a>

Basically all I had to do in the frontend was integrate the editor as described, and add a class &#8220;editable&#8221; to the element that should be editable.

<pre class="brush: xml; title: ; notranslate" title="">&lt;h1 class="editable" id="c1title"&gt;Example headline.&lt;/h1&gt;
</pre>

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

<pre class="brush: java; title: ; notranslate" title="">public static Result aloha() {
   final Map&lt;String, String[]&gt; 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();
}
</pre>

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!