Add "highlight" button to ContentEditable

Question

I'm making a little WYSIWYG for a project, and I need the ability to highlight text, click a button, and that will append a span around the selection with a class of ".highlight". The span will have a yellow background.

This is what I have so far from elsewhere on SO which is appending text instead of HTML. http://jsfiddle.net/aGzvp/

Here's the JS:

function wrap(tag) {
    var sel, range;

    if (window.getSelection) {
        sel = window.getSelection();

        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('[' + tag + ']' + selectedText + '[/' + tag + ']'));
        }
    }
    else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        selectedText = document.selection.createRange().text + "";
        range.text = '[' + tag + ']' + selectedText + '[/' + tag + ']';
    }

}

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

One option is the class highlighter module of my Rangy library. This has the advantage of working in all major browsers (including IE 6-8) and working in the general case, such as when the selection includes text that starts and ends in different elements.

If the only case you need to deal with is text inside a single text node, you can create a range from the selection and call its surroundContents() method. See the following answer for details:

https://stackoverflow.com/a/6328906/96100

edited May 23 '17 at 12:21

Community

1
1

answered Mar 10 '14 at 15:01

Tim Down

318,141
75
454
536

1

I was waiting for Tim Down, the almighty range wizard to chime in! Thanks, I will look at it this evening and comment back if I have any issues. – kthornbloom Mar 10 '14 at 15:07

Add "highlight" button to ContentEditable

1 Answers1