topic Aloha Editor Extension Demo in Alfresco Archive

topic Aloha Editor Extension Demo in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/aloha-editor-extension-demo/m-p/156355#M110611 <HTML><HEAD></HEAD><BODY>On Friday I was at the very <A href="http://events.jquery.org/2012/uk/" rel="nofollow noopener noreferrer">first European jQuery conference</A>. One of the tips I picked up there was about <A href="http://aloha-editor.org/" rel="nofollow noopener noreferrer">Aloha editor</A>; they had a very good 30 minute intro to it & I thought it was worth exploring further - I also made <A href="http://www.cognite.net/blogs/david-webster/jquery-uk-conference" rel="nofollow noopener noreferrer">other notes of the day</A>. Yes, it was another <A href="https://www.alfresco.com/blogs/dwebster/tag/iday/" rel="nofollow noopener noreferrer">iDay</A>, and another tool based on <A href="http://jquery.com/" rel="nofollow noopener noreferrer">jQuery</A> (just like <A href="https://www.alfresco.com/blogs/dwebster/2011/09/26/share-calendar-updates/" rel="nofollow noopener noreferrer">FullCalendar</A> and <A href="https://www.alfresco.com/blogs/dwebster/2011/10/07/alfresco-example-extension-peerbind-demo/" rel="nofollow noopener noreferrer">Peerbind</A>). The Wiki is an area of <A href="http://www.alfresco.com/" rel="nofollow noopener noreferrer">Alfresco</A> that seems popular with users, yet I really don't like <A href="http://www.tinymce.com/" rel="nofollow noopener noreferrer">TinyMCE</A> - 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 <A href="http://aloha-editor.org/license.php" rel="nofollow noopener noreferrer">license</A> 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 <A href="https://twitter.com/#!/draftkraft" rel="nofollow noopener noreferrer">Haymo Meran</A> 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 <A href="http://aloha-editor.org/features.php" rel="nofollow noopener noreferrer">repository browser</A>, which is supposedly CMIS compatible - that would make it ideal for embedding or linking to content from elsewhere in Alfresco. I created an extension (<A href="https://github.com/davidcognite/Alfresco-Share-Aloha-Editor-Extension-Demo" rel="nofollow noopener noreferrer">code on GitHub</A>) - <A href="https://github.com/davidcognite/Alfresco-Share-Aloha-Editor-Extension-Demo/blob/master/aloha-wiki-poc.jar?raw=true" rel="nofollow noopener noreferrer">and jar here</A> - 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. <PRE><CODE> 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             }          })       });    } }); </CODE></PRE> Hope that's useful. Let me know in the comments what prototyping you're playing with using <A href="http://www.alfresco.com/products/editions/enterprise/4-0/" rel="nofollow noopener noreferrer">Alfresco 4</A>'s extensibility framework. David. </BODY></HTML> Tue, 14 Feb 2012 14:43:16 GMT davidcognite 2012-02-14T14:43:16Z Aloha Editor Extension Demo https://connect.hyland.com/t5/alfresco-archive/aloha-editor-extension-demo/m-p/156355#M110611 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 Tue, 14 Feb 2012 14:43:16 GMT https://connect.hyland.com/t5/alfresco-archive/aloha-editor-extension-demo/m-p/156355#M110611 davidcognite 2012-02-14T14:43:16Z