After a lot of searching around for the perfect inline-editor for bakaCMS i chose 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. 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.

<script type="text/javascript">
    	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);

    </script>

The only thing I changed to get it to work, was this part

var id = eventProperties.editable.getId();
          var fields = id.split(/-/);
          var id = fields[1];

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 adress 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.

b{ font-weight:bold;}

i{font-style:italic;}

I hope this helped someone and feel free to ask in the comments.