Как обернуть выделенный текст из window.getSelection (). GetRangeAt (0) тегом html?

Question

Как мне взять выделение из window.getSelection (). GetRangeAt (0) и окружить его тегом HTML, таким как «span» или «mark»? Я предпочитаю прямое решение javascript или jQuery.

Я могу вывести выделенный текст с помощью оповещения, но еще не выяснил, как окружить его дополнительной разметкой. Я видел много примеров запуска execCommand для выбора, но это не то, что я искал.

Смотрите мой рабочий пример на jsfiddle

Есть идеи? Спасибо

Answer 1

Если весь выделенный текст содержится в одном текстовом узле, вы можете использовать метод Range в диапазоне surroundContents(). Тем не менее, это не работает в общем случае. Что нужно сделать, это окружить каждый текстовый узел в диапазоне в <span>. Моя Rangy библиотека имеет модуль, который делает это и работает кросс-браузерно (IE <= 8 изначально не поддерживает диапазон DOM). </p>

Пример кода с использованием Rangy:

<style type="text/css">
    span.highlighted {
        background-color: yellow;
    }
</style>
<script type="text/javascript">
    var highlightApplier;

    window.onload = function() {
        rangy.init();
        highlightApplier = rangy.createCssClassApplier("highlighted ", true);
    };

    function applyHighlight() {
        highlightApplier.applyToSelection();
    }
</script>

Answer 2

(Отвечая на мой собственный вопрос, основанный на аналогичном вопросе, который я нашел, когда я отправил свой ...)

Ребята в этой теме вопросов и ответов были на интересной трассе.Он просто использовал другой формат, чем я искал.Изменяя их код, я смог сделать следующее:

<h3><a href="#" id="btnRange">Display Range</a> |
<a href="#" id="btnMark">Mark Range</a></h3>

<div contenteditable="true" id="editor">
    This is sample text. You should be able to type in this box or select anywhere in this div and then click the link at the top to get the selected range.
</div>

<script type="text/javascript">
    var btnDisplay = $("#btnRange"),
        btnMark = $("#btnMark");

    btnDisplay.click(function() {
        alert(window.getSelection().getRangeAt(0));
        return false;
    });

    btnMark.click(function() {
        var range = window.getSelection().getRangeAt(0);
        var newNode = document.createElement("mark");
        range.surroundContents(newNode);
        return false;
    });

Я мог бы дополнительно абстрагировать код в функции btnMark.click (), чтобы принять имя тега, а затем создатьряд кнопок для разметки кода с пометкой, pre, blockquote.

Рабочее решение можно найти здесь: http://jsfiddle.net/3tvSL/

Answer 3

Сначала получите диапазон:

var savedRange;
savedRange = window.getSelection().getRangeAt(0);

При нажатии кнопки:

   function formatCode(e){
        var textAreaVal = document.getElementById('divWithContentEditable').innerText;
        if(textAreaVal.length>0){
            var newtxt = '<pre><code>'+savedRange+'

replaceIt ($ ('# topicDetails') [0], newtxt); } }

Добавить / Заменить элементы вокруг текста:

replaceIt(txtarea, newtxt) {
    $(txtarea).text(newtxt));  
}

Конечно, вы можете использовать Rangy , но я считаю, что добавление дополнительных 500 КБ для простых требований не рекомендуется.