So, a update on bakaCMS. We’d like to introduce Micro Apps. Small independent apps which fits in like normal content fields which mean you can add, delete and rearrange.

So far we have to micro apps a Like layer, since it is meant for facebook and an image slider – we use Nivo slider.

See the video for more details.

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.

In short the concept is a very light weight CMS solution for Facebook pages where you don’t need to set up an external system.

When you’re hold the role of admin of a page, the ‘Plus’ icon shows in the upper right corner. From here you add new text and image fields.

Fields are ‘boxes with content’, text or images. Text can be edited inline by using the Aloha-editor and images ny a not yet implemented technology.

Fields can be resized as well as sorted, so you can control the structure of your content. Everything without ever leaving your page.

bakaCMS is a bigger and better version of simpleBaka, I made earlier this year. I’m gonna put it back up in the near future , until then you can see the demo video at Vimeo.