How to install Aloha Editor
From AlohaWiki
Some or all information on this page is out of date starting with Aloha Editor Version 0.10 and needs to be updated.
Contents |
Integrate not install
Aloha Editor is not a standalone CMS or a standalone HTML Editor to create websites.
Aloha Editor is a semantic Rich Text Editor written in pure Javascript with no integrated persistence functionality. Actually you don’t "install" Aloha Editor. It is JavaScript Library which has to be “embedded”. Use it like a supersonic textarea. You can edit any DOM element with this supersonic textarea, but you need to care about configuration and storage.
Prepare Aloha Editor
- Download Aloha Editor (http://aloha-editor.com)
- Upload the zip-file to your webserver in a separate directory
Embed Aloha Editor in your website
Embed Aloha Editor and the desired plugins in the head of the web page like this:
<head> ... <script type="text/javascript" src="aloha/aloha/aloha.js"></script> <script type="text/javascript" src="aloha/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script> <script type="text/javascript" src="aloha/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script> <script type="text/javascript" src="aloha/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script> </head>
In this example the formatting-, table- and list-plugin will be loaded together with Aloha Editor. You can combine the plugins to one script only, and there are no-deps versions of Aloha Editor with no jQuery and ext.JS integrated.
You should check user and permissions setting before integrating Aloha Editor.
Make parts of the Website editable
Define using css selectors like style which part/contents of the web page should be editable by Aloha Editor. For example, if you want to edit
<div id="content">...</div>
you should define it like this:
<script type="text/javascript">
$(function(){
$('#content').aloha();
});
</script>
also, if you want to edit all elements of the class "editme" you should define it like that:
$('.editme').aloha();
Save Content
You need to implement a method to save the changed content to your backend. Only use the method editable.getContents() to get the content. Do not use innerHtml or any other method. Aloha Editor makes the HTML code “dirty” when an editable is active. Before you get the content through the .getContents() method all plugins cleanup the source code and you get what you actually want.
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";
});
// this fakes the saving of the content to your backend.
// TODO implement this to save the edited aloha content into your backend
alert(this.i18n('saveMessage')+"\n\n"+content);
Yeah, that's it basically, if you have further questions regarding installation please use the Aloha Editor forum at GetSatisfaction http://getsatisfaction.com/aloha_editor/
You may also want to take a look at our AlohaExamples.
