Aloha.js - The Solution

Published on 24th Jan, 2014

I owned my own business as a web developer for a few years. During that time I was repeatedly faced with clients who wanted to update content easily.

Most sites I developed utilized the Joomla! CMS but a few used WordPress. Typically, when I would show clients how to use the back-end, it would become obvious that it was over their head. For non-web folks there is a severe disconnect between the front-end and back-end of a site. People like to simply edit what they see and don't want to mess with updating from the back-end. And I don't blame them. Joomla! and WordPress offer front-end WYSIWYG editors but they still take a person to a different page to do the editing and while editing the content, it never looks exactly like it does on the page.

Enter Aloha.js: The solution.

My how I wish I'd been aware of (and had the skills) to implement this gem at the time I was developing my client's site. It harnesses the best of both the HTML5 Content Editable Attribute and a good ol' Javascript editor.

Here it is in action (click anywhere in the box):

This is content is COMPLETELY editable! How cool is that?!

Pretty cool, huh? Since it's manipulating DOM elements directly, you lose none of your styling. It has an extensive API that allows you to bind edit events so that you can whisk your user's updated content into the database.

They even have a CDN set up so all it takes is the following code:

<!-- load the Aloha Editor core and some plugins -->
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/require.js"></script>
<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,                                            common/format,common/list,common/link"></script>

<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" type="text/css" />

<!-- make all elements with class="editable" editable with Aloha Editor -->
<script type="text/javascript">
    Aloha.ready( function() {
        var $ = Aloha.jQuery;
        $('.editable').aloha();
    });
</script>

That's really it. Now, granted, it takes some setting up. Especially if you're going to implement this into Joomla!. (Wordpress users are in luck). There are of course many ways to implement this but it would require either stashing data attributes into your editable DOM elements or tying into the existing Routing system of your CMS. Either way, well worth the effort.

My wife recently requested an online resume. Nothing fancy, but I knew she'd want to edit the content and thought, "Hmm....Aloha?" I'm glad I did. I sectioned off parts of her resume into Aloha Editables. I don't have this set up with any CMS, it's just a index.php file. So when anything is saved, I grab the entire dom:

//Function to get entire page with DOCTYPE and  tags
function getPageHTML() {
    return "" + $("html").html() + "";
}

And then send it via ajax to my php script that just overwrites the file.

//save.php
$html = $_POST['content'];
file_put_contents("index.php", $html);
exit();

VERY rudimentary and yes, a bit lazy, but for the time being it works well and gave me a chance to play with what is, in my belief, the future of content management.

Enjoy!

Rick

This article is my 24th oldest. It is 507 words long

comments powered by Disqus