Aloha-editor saving to database

After a lot of searching around for the perfect inline-editor: the Aloha editor – a open source HTML5 goodie. The website have a lot of good examples to it’s use, so I’ll skip one here and just write a few lines on how I implemented it into bakaCMS – (UPDATE: bakaCMS is dead). For a lot of developers this probably isn’t a big deal, bur for not-a-scripting-master like me it was.
Aloha-editor and Codeigniter
The code I use is mostly taking from the PHP-example at Aloha editor.org where they save your text to a session. What I – and I think most other people – need is to store it in a database using mySQL. So here’s what I did.
[code]
function saveEditable(event, eventProperties) { var content = eventProperties.editable.getContents(); var id = eventProperties.editable.getId(); var fields = id.split(/-/); var id = fields[1]; $.post("site/update_text", { content: eventProperties.editable.getContents(), id: id } ); } GENTICS.Aloha.settings = { "i18n": {"current": "en"}, "ribbon": false, "plugins": { "com.gentics.aloha.plugins.GCN": { "enabled": false }, "com.gentics.aloha.plugins.Format": { config : [ 'b', 'i','u','del','sub', 'sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'], } } }; $(document).ready(function() { $('.content').aloha(); }); GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, "editableDeactivated", saveEditable);
[/code]
The only thing I changed to get it to work, was this part
[code]
var id = eventProperties.editable.getId();
var fields = id.split(/-/);
var id = fields[1];
[/code]
My id’s on the editable div’s is called id=”content-1″, id=”content-2″ ect. which is generated from an unique ID in the database for each field which is attached to ‘content-’. The thing is when Aloha-editor takes the div’s ID’s by the getId()-function, you’ll get ont ony the numbers of the field ( == to the ID in the database for the content) you get ‘content-1′. So I used a it of javascript to split the ‘content-’ from the ‘id’ and could then pars the id and the corresponding content of the div to be injected in the database – which I’m sure you know how to do.
The post address is ‘site/update_text’ due ‘to update_text’ -function in the site controller.
And thats pretty much it. Oh, one other thing about Aloha-editor I didn’t get right away was the lack of ‘bold’ and ‘italic’ -formatting not working. Right until I realized you have to declare it in your css.
[code]
b{ font-weight:bold;}
i{font-style:italic;}
[/code]
I hope this helped someone and feel free to ask in the comments.