Knowledge Pages: Aloha html5 editor

After doing my research on available html editors, found this html5 editor, recently released and quite cool to have as editor for web site contents online.

Beauty of the aloha html editor is, it does not need a textarea, it allow you to mark particular page content, which you like to edit and provides a boundary to the that area, which means its dynamically create a textarea on active text, and let you have a feeling of WYSIWYG feature.

Another, cool thing about this editor is, its floating menu style, I like it so much. Html5 editor is still in under experiment, which we need to wait and see, how does it progress in future.

I will take you through an implementaion of such a cool gadget style html editor.

To start, download aloha library package from this link aloha-0.9.3.zip
Extract the zip; below shows aloha's directory structure

aloha html editor directory structure

write an html file as follows

wirte doctype as <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Add following plugins java scripts and
<script type="text/javascript" src="aloha/aloha.js"></script>

Add a div element to the body where the editable content shall be rendered or added by aloha editor as <div id="content" ><br><br></div>

Add below java script code for aloha to get instantiate its resources

GENTICS.Aloha.settings = {

logLevels: {'error': true, 'warn': true, 'info': true, 'debug': false},

errorhandling : false,

ribbon: false,

"i18n": {

// you can either let the system detect the users language (set acceptLanguage on server)

// In PHP this would would be '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>' resulting in

// "acceptLanguage": 'de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'

// or set current on server side to be in sync with your backend system

"current": "en"

"repositories": {

"com.gentics.aloha.repositories.LinkList": {

data: [

{ name: 'Aloha Developers Wiki', url:'http://www.aloha-editor.com/wiki', type:'website', weight: 0.50 },

{ name: 'Aloha Editor - The HTML5 Editor', url:'http://aloha-editor.com', type:'website', weight: 0.90 },

{ name: 'Aloha Demo', url:'http://www.aloha-editor.com/demos.html', type:'website', weight: 0.75 },

{ name: 'Aloha Wordpress Demo', url:'http://www.aloha-editor.com/demos/wordpress-demo/index.html', type:'website', weight: 0.75 },

{ name: 'Aloha Logo', url:'http://www.aloha-editor.com/images/aloha-editor-logo.png', type:'image', weight: 0.10 }

]

}

"plugins": {

"com.gentics.aloha.plugins.Format": {

// all elements with no specific configuration get this configuration

config : [ 'b', 'i','sub','sup'],

editables : {

// no formatting allowed for title

'#title' : [ ],

// formatting for all editable DIVs

'div' : [ 'b', 'i', 'del', 'sub', 'sup' ],

// content is a DIV and has class .article so it gets both buttons

'.article' : [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']

}

"com.gentics.aloha.plugins.List": {

// all elements with no specific configuration get an UL, just for fun :)

config : [ 'ul' ],

editables : {

// Even if this is configured it is not set because OL and UL are not allowed in H1.

'#title' : [ 'ol' ],

// all divs get OL

'div' : [ 'ol' ],

// content is a DIV. It would get only OL but with class .article it also gets UL.

'.article' : [ 'ul' ]

}

"com.gentics.aloha.plugins.Link": {

// all elements with no specific configuration may insert links

config : [ 'a' ],

editables : {

// No links in the title.

'#title' : [ ]

// all links that match the targetregex will get set the target

// e.g. ^(?!.*aloha-editor.com).* matches all href except aloha-editor.com

targetregex : '^(?!.*aloha-editor.com).*',

// this target is set when either targetregex matches or not set

// e.g. _blank opens all links in new window

target : '_blank',

// the same for css class as for target

cssclassregex : '^(?!.*aloha-editor.com).*',

cssclass : 'aloha',

// use all resources of type website for autosuggest

objectTypeFilter: ['website'],

// handle change of href

onHrefChange: function( obj, href, item ) {

if ( item ) {

jQuery(obj).attr('data-name', item.name);

} else {

jQuery(obj).removeAttr('data-name');

}

"com.gentics.aloha.plugins.Table": {

// all elements with no specific configuration are not allowed to insert tables

config : [ ],

editables : {

// Allow insert tables only into .article

'.article' : [ 'table' ]

}

};

$(document).ready(function() {

$('#title').aloha();

$('#teaser').aloha();

$('#content').aloha();

});

</script>

Following code is to play around with the editor using control button on html page,

I like to modify some content on the page and like to publish, when I press the publish button, idea is the button calls below given java script methods

savePage() would save actually publish the content to the same page (just for the simplicity)

Ext.onReady(function(){

var editor = new Ext.form.HtmlEditor({id:'note'});

editor.applyTo('note');

})

var contentHtml;

function savePage (){

//alert("Hello World!");

var content;

// iterate all dom elements which have been made aloha editable

jQuery.each(GENTICS.Aloha.editables,function (index, editable) {

// and get their clean and valid html5 content, and remember it to fake saving

content = content + "Editable ID: " + editable.getId() +"\nHTML code: " + editable.getContents() + "\n\n";

publishContent(editable.getContents());

contentHtml = editable.getContents();

editable.disable();

this.obj.deactivateEditable();

// set scope for floating menu

this.obj.FloatingMenu.setScope('GENTICS.Aloha.empty');

//this.activeEditable = null;

//alert(contentHtml);

});

// this fakes the saving of the content to your backend.

// TODO implement this to save the edited aloha content into your backend

//alert("Hello World!123");

//alert(""+content);

};

/// method publishes this content to the url '/TestEditor/saveContent', which directs the request to a servlet to process it ( servlet further can store the content in database and retrieve back for the publishing)

function publishContent(content) {

//alert('this is publish content-'+content);

//alert('checkUserName');

url = '/TestEditor/saveContent';

if (window.XMLHttpRequest) {

// alert('this is window.XMLHttpRequest-'+document.myform.htmlEditor.value);

// obtain new object

obj = new XMLHttpRequest();

// callback function

obj.onreadystatechange = processChange;

// this will perform a GET with the url

obj.open("POST", url, true);

obj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

if (content != null){

// alert('content available now'+content);

obj.send('htmlEditor='+content);

} else

obj.send('htmlEditor='+document.myform.htmlEditor.value);

// IE/Windows ActiveX object

} else if (window.ActiveXObject) {

obj = new ActiveXObject("Microsoft.XMLHTTP");

if (obj) {

obj.onreadystatechange = processChange;

obj.open("POST", url, true);

// don't send null for ActiveX

obj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

obj.send('htmlEditor='+document.myform.htmlEditor.value);

}

} else {

alert("Your browser does not support AJAX");

}

// just after it publish, I force editor to deactivate, which it require to press Edit button for user to again start editing

function activateEditable(){

//alert('activateEditable');

jQuery.each(GENTICS.Aloha.editables,function (index, editable) {

//alert('enabling');

//editable.activate();

editable.enable();

});

};

Finally the body part of our html file which will have all the game.

<body>

</div>

<br />

</form>

</div>

</body>

Hope this would help you to get the one of the coolest Html editor and save the edited content and render back on screen. Drop me your queries or further knowledge on knowledge-pages.

Thanks

Knowledge Pages

Pages

Sep 14, 2011

Aloha html5 editor

No comments:

Post a Comment

Followers

About Me