Archive for the html5 Category

Aloha Editor: How to create toggling Toolbar Buttons?

As we are preparing our new admin section at me’kono, i was looking for a new up-to-date WYSIWYG Editor to use and finally thought to go with the aloha editor Version 2. To my disappointment the documentation at the time of writing is quite… ah, well… not the best – and simple questions popped up quite fast. So in this first post we’d like to share our findings and how to create toggling formatting buttons for your toolbar in the Aloha editor.

Let’s start where Leap 3 in the very short docs leaves you.

So you got your buttons defined like this:

and your jQuery event handler looks like this:

Now these event handler can set the selection to bold, italic, underline, etc. but don’t reset the style if you click once again. If you have a look at the predefined array of commands, there are no is no help either:

But the unformat object uses a method removeFormatting and after having a look at that, you can figure out how tags are applied on a basic level.

This can be applied to our click handler so we use the Editing.wrap  method too:

Short explanation:

  • aloha.ui.commands  are objects consisting of at least an action property – a function, which gets called. We create this on the fly on lines 5-9.
  • To calculate the tag to wrap around the selection we use the node property of the command in uppercase.
  • To get the clicked command we substract ‚action-‚ from the buttons class property

Well, this should now do the same as before. So what’s the deal here? It’s simple – just change the last parameter of the wrap method call to false and you and up with a toggling formatting button. We do this by checking if the clicked formatting button has the active property – which you should have if you have gotten to Leap 5: Update Button States in the tutorial and simply set an extra active attribute . So our final code looks like this:

So, we hope this helps you create a toolbar for your Aloha Editor with toggling format buttons.