Aloha Editor - get highlighted text and replace with html code

Question

i'm trying to set up a custom action in Aloha, adding a button that would enclose the selected text into a span class.

Example : you selected "example word"

and it would change it for

<span>example word</span>

My problem is at the moment that I can not get the selected text out of Aloha even less reinserting it.

From the documentation, these lines keep on returning nothing :

var range;
if ( Aloha.getSelection().rangeCount > 0 ) {
range = Aloha.getSelection().getRangeAt( 0 );
}

Full code :

    var redHighlight = "";
    Aloha.require(['ui/ui', 'ui/button'], function(Ui, Button) {
        var redButton = Ui.adopt("redButton", Button, {
            tooltip: 'Label',//gives inner text
            click: function(){
              var range;
              if ( Aloha.getSelection().rangeCount > 0 ) {
                  range = Aloha.getSelection().getRangeAt( 0 );
              }
              console.log(range); //returns nothing
            }
        });
    });

    Aloha.settings.toolbar = {
        tabs: [
         {
            label: 'Urgent',
            components: [ 'redButton' ],
         }
        ],
        exclude: [ 'strong', 'emphasis', 'strikethrough' ]
    };

EDIT 1: I went on the Aloha forum with this question, from the mod I got that reinserting html within the output might cause some DOM issues, and I first missed from the doc that the range functions were not compatible with Google Chrome which I'm developping on/for.

Still interested in a solution though :)

Thanks in advance,

Answer 1

You can have a look at plugins like the wai-lang plugin in the extra package. There is a utility object in Aloha Editor that helps you wrap the selected text into a DOM object.

var range = Aloha.Selection.getRangeObject();
if (range.isCollapsed()) {
            GENTICS.Utils.Dom.extendToWord(range);
}
if (!range.isCollapsed()) {
    GENTICS.Utils.Dom.addMarkup(range,
        jQuery('<span class="myspecialspan"></span>'), false);
}
range.select();

Apart from altering the selection accordingly, it will also handle DOM splitting when for example you don't have just text selected but your selection also contains block elements that can't be wrapped into a span, the span will be split:

<h1>{Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3}</h1>

where { marks the beginning of the selection and } the end, will result in

<h1>{<span class="myspecialspan">Heading 1</span></h1>
<h1><span class="myspecialspan">Heading 2</span></h1>
<h1><span class="myspecialspan">Heading 3</span>}</h1>