Вставка текста до и после выбора в контентной

Есть ли способ вставить текст, похожий на bbcode, до и после выбранного текста в contenteditable div? Я видел много ответов для textarea, но код не работает с contenteditable div. Поддержка IE не требуется.

Ответ 1

Подход, который я предлагаю:

Получить диапазон из выделения
Вставьте текст node в конец диапазона
Вставьте другой текст node в начале диапазона
Повторно выберите исходный текст

Следующая демонстрация будет работать во всех основных браузерах, кроме IE <= 8.

Демо: http://jsfiddle.net/8WEru/

код:

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);
        }
    }
}

Ответ 2

Если я понимаю из ваших комментариев новую цель, у вас есть выбор и вы хотите окружить ее элементом. Затем должен работать метод диапазона surroundContents:

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var strong = document.createElement('strong');
range.surroundContents(strong);