Добавить элемент до / после выделения текста - PullRequest
Новая
       32

Добавить элемент до / после выделения текста

8 голосов
/ 27 ноября 2011

Я ищу функцию, которая позволяет мне создавать какой-либо элемент до или после выделенного текста.Нечто похожее на это javascript заменяет выделение для всех браузеров , но для добавления некоторого контента до или после выделения вместо его замены, как after() и before() jQuery.Должен ли я использовать какой-либо метод выбора DOM, если да, какой?Или существует что-то более легкое для этого?

Ответы [ 2 ]

13 голосов
/ 27 ноября 2011

Вот пара функций для этого.

Живой пример: http://jsfiddle.net/hjfVw/

Код: 

var insertHtmlBeforeSelection, insertHtmlAfterSelection;

(function() {
    function createInserter(isBefore) {
        return function(html) {
            var sel, range, node;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = window.getSelection().getRangeAt(0);
                    range.collapse(isBefore);

                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ( (node = el.firstChild) ) {
                        lastNode = frag.appendChild(node);
                    }
                    range.insertNode(frag);
                }
            } else if (document.selection && document.selection.createRange) {
                // IE < 9
                range = document.selection.createRange();
                range.collapse(isBefore);
                range.pasteHTML(html);
            }
        }
    }

    insertHtmlBeforeSelection = createInserter(true);
    insertHtmlAfterSelection = createInserter(false);
})();
2 голосов
/ 27 ноября 2011

В MSIE: свертывание заданный диапазон и использование pasteHTML для вставки элемента

Другие: Также сверните заданный Range и вставьте элемент через insertNode

Оба метода collapse принимают необязательный аргумент, определяющий, где вы хотите свернуть.Если вы хотите поместить элемент в конец, сверните его до конца, в противном случае - до начала.

...