poornerd

Ok, so it is only par­tial edit­ing, but still this is an inter­est­ing step in the “no CMS” direc­tion. What I have done is mod­i­fied the exam­ple code which I posted on github last week for inline edit­ing of HTML5 ele­ments with the Aloha WYSIWYG Edi­tor to actu­ally save the new con­tent back in to the Scala Template.

I find this use­ful for allow­ing non-techie col­leagues to edit and opti­mize text and word­ings in more con­tent ori­ented tem­plates. Of course it does directly mod­ify the source, so in the case of a live web­site you would want to do this in the devel­op­ment envi­ron­ment and then com­mit, push, deploy the new ver­sion — hence “no CMS”.

In my exam­ple I have lim­ited the fron­tend code to a block in the footer tem­plate. It is only ren­dered into the page if the fol­low­ing value is set to true in the application.conf:

play-aloha.admin=true

One of the non-elegant parts of the code is decid­ing which tem­plate file to look for the HTML to replace. Right now it is hard coded. I sup­posed the most prag­matic way would be to cre­ate a hashtable map­ping URL’s to filenames.

Here you can see the changed HTML in the scala template:

The code is in github here: https://​github​.com/​p​o​o​r​n​e​r​d​/​p​l​a​y​-​a​l​oha

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

I 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!