Insert text before and after selection in a contenteditable

Question

Is there a way to insert text similar to bbcode before and after the selected text in a contenteditable div? I've seen many answers for textarea, but the code does not work with a contenteditable div. IE support is not needed.

Answer 1

The approach I'd suggest is:

• Obtain a range from the selection
• Insert a text node at the end of the range
• Insert another text node at the start of the range
• Reselect the original text

The following demo will work in all major browsers except IE <= 8.

Demo: http://jsfiddle.net/8WEru/

Code:

function surroundSelection(textBefore, textAfter) {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var startNode = range.startContainer, startOffset = range.startOffset;

            var startTextNode = document.createTextNode(textBefore);
            var endTextNode = document.createTextNode(textAfter);

            var boundaryRange = range.cloneRange();
            boundaryRange.collapse(false);
            boundaryRange.insertNode(endTextNode);
            boundaryRange.setStart(startNode, startOffset);
            boundaryRange.collapse(true);
            boundaryRange.insertNode(startTextNode);

            // Reselect the original text
            range.setStartAfter(startTextNode);
            range.setEndBefore(endTextNode);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}