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:
|
1 2 3 4 |
<button class="action-bold">B</button> <button class="action-italic">I</button> <button class="action-underline">U</button> <button class="action-unformat">✘</button> |
and your jQuery event handler looks like this:
|
1 2 3 4 5 6 |
for (var command in aloha.ui.commands) { $('.action-' + command).on( 'click', aloha.ui.command(aloha.ui.commands[command]) ); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var commands = { 'p' : { 'node' : 'p' }, 'h1' : { 'node' : 'h1' }, 'h2' : { 'node' : 'h2' }, 'h3' : { 'node' : 'h3' }, 'h4' : { 'node' : 'h4' }, 'ol' : { 'node' : 'ol' }, 'ul' : { 'node' : 'ul' }, 'pre' : { 'node' : 'pre' }, 'bold' : { 'node' : 'b', 'override' : 'bold' }, 'italic' : { 'node' : 'i', 'override' : 'italic' }, 'underline' : { 'node' : 'u', 'override' : 'underline' }, /** * Unformat command. * * @type {Object} * @memberOf ui.commands */ 'unformat' : { 'state' : Fn.returnFalse, 'action' : removeFormatting, 'nodes' : ['b', 'i', 'u', 'em', 'strong', 'sub', 'sup', 'del', 'small', 'code'] } }; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function removeFormatting(boundaries, selection, command) { command['nodes'].map(function (node) { return node.toUpperCase(); }).forEach(function (formatting) { boundaries = Editing.wrap( formatting, boundaries[0], boundaries[1], true ); }); return boundaries; } |
This can be applied to our click handler so we use the Editing.wrap method too:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
for (var command in aloha.ui.commands) { $('.action-' + command).on( 'click', function () { var cmd = aloha.ui.commands[$(<span class="keyword">this</span>).attr('class').substr(7)]; aloha.ui.command({ 'action': function(bnds) { return aloha.editing.wrap(cmd.node.toUpperCase(), bnds[0], bnds[1], true); } }); } ); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
for (var command in aloha.ui.commands) { $('.action-' + command).on( 'click', function (e) { var cmd = aloha.ui.commands[$(this).attr('class').substr(7)]; var applyTag = !$(this).attr('active'); aloha.ui.command({ 'action': function(bnds) { return aloha.editing.wrap(cmd.node.toUpperCase(), bnds[0], bnds[1], applyTag); } })(e); } ); } |
So, we hope this helps you create a toolbar for your Aloha Editor with toggling format buttons.
