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>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.TOC/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Link/delicious.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Link/LinkList.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Paste/plugin.js"></script>
<script type="text/javascript"
src="aloha/plugins/com.gentics.aloha.plugins.Paste/wordpastehandler.js"></script>
<link rel="stylesheet"
href="AlohaWorld.css" />
<script type="text/javascript" src="/ext-3.2.1/ext-all.js"></script>
<link rel="stylesheet"
type="text/css" href="/ext-3.2.1/resources/css/ext-all.css"
/>
<script language="javascript" type="text/javascript">
- 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
<script type="text/javascript">
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 id="content"
><br><br>
</div>
<form name="myform">
<textarea name="htmlEditor"
cols="125" rows="20" ></textarea>
<br />
<input type="button"
value="Save" onclick="publishContent(null)" /><br>
<input type="button"
value="Publish" onclick="savePage()" />
<input type="button"
value="Edit" onclick="activateEditable()" />
</form>
<div id="published">
</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
