Aloha Editor Extension Demo

[davidcognite]

On Friday I was at the very first European jQuery conference. One of the tips I picked up there was about Aloha editor; they had a very good 30 minute intro to it & I thought it was worth exploring further - I also made other notes of the day. Yes, it was another iDay, and another tool based on jQuery (just like FullCalendar and Peerbind).



The Wiki is an area of Alfresco that seems popular with users, yet I really don't like TinyMCE - the rich test editor that we use: from a maintenance point of view it can just suck time. With those two things in mind, I thought the best way to test it out was to create an extension that disabled the main editor interface and enabled the Aloha editor.



Having played around with it for a bit - I'm not sure that Aloha is ready for the prime time just yet (there were a couple of occasions it behaved a little bit funny and lost some formatting) - and the license counts it out for distribution with Alfresco anyway - but I liked it. It felt much more natural being able to edit content in-situ like that without needing to fire up a new window where you're constrained by an input text area.



In his talk at the conference Haymo Meran showed that their research indicates that this editor would be 25% quicker to use than other rich text editors due to the UX improvements they've made, especially in reducing the number of actions a user needs to perform to complete a task. I can certainly see that those stats could be true - especially when you factor in a page load and refresh that aren't needed. One area I didn't get chance to look at was the built in repository browser, which is supposedly CMIS compatible - that would make it ideal for embedding or linking to content from elsewhere in Alfresco.



I created an extension (code on GitHub) - and jar here - that quite simply (in just a few lines of Javascript) invokes the Aloha editor, hides the normal edit link and then posts any modifications back to the server. This code is a proof of concept and shouldn't be used for production use - I expect there to be a few issues with the version numbering, so some extra code would be needed to deal with that - and there's no error handling. I think however that this demonstrates the flexibility of the new Share Extensibility system - with just a few lines of code and a small number of files, it's possible to completely change the functionality of existing Share features.



I've got the extension descriptor that adds a new web script (with an empty template file). All the new web script does is add a few extra lines into the head on the wiki-page, calling in the Aloha library (from aloha-editor.org - you'll probably want to host locally, but for ease of this example I just linked it) and an additional client side javascript file that does the magic.

Aloha.ready( function()

{

   var wiki = Alfresco.util.ComponentManager.findFirst('Alfresco.WikiPage'),

      $ = Aloha.jQuery;

   if (wiki.options.permissions.edit)

   {

      $('a.tabLabel[href$=edit]').next().andSelf().hide();

      var wikiContent = $('div.rich-content');

      wikiContent.aloha();

      Aloha.bind( 'aloha-editable-deactivated', function ( event, params )

      {

         // Save the results to Alfresco.

         var version = wiki.options.versions[wiki.options.versions.length -1];

         Alfresco.util.Ajax.jsonPut(

         {

            url: Alfresco.constants.PROXY_URI + 'slingshot/wiki/page/' + Alfresco.constants.SITE + '/' + version.title,

            dataObj:

            {

               context: Alfresco.constants.URL_PAGECONTEXT + 'site/' + Alfresco.constants.SITE + '/wiki-page?title=' + version.title,

               currentVersion: version.label,

               forceSave: true,

               page: 'wiki-page',

               pagecontent: wikiContent[0].innerHTML,

               tags: wiki.options.tags

            }

         })

      });

   }

});

Hope that's useful. Let me know in the comments what prototyping you're playing with using Alfresco 4's extensibility framework.



David.