Вставте html у кареті у вміщений div


74

У мене є div із заданим набором, і я захоплюю натискання клавіші за допомогою jquery для виклику prevenDefault () при натисканні клавіші enter. Подібно до цього питання, яке вставляє текст біля курсору, я хотів би безпосередньо вставити html, для стислості ми скажемо його тег br. Використання відповіді на вищезазначене питання насправді працює в IE, оскільки використовує метод range.pasteHTML, але в інших браузерах тег br відображатиметься як звичайний текст, а не html. Як я можу змінити відповідь, щоб вставити html, а не текст?

Відповіді:


181

У більшості браузерів ви можете використовувати insertNode() метод діапазону, який ви отримуєте з виділення. В IE <9 ви можете використовувати pasteHTML(), як ви вже згадували. Нижче наведена функція, яка робить це у всіх основних браузерах. Якщо вміст уже вибрано, він замінюється, тож це фактично операція вставки. Крім того, я додав код для розміщення каретки після закінчення вставленого вмісту.

jsFiddle: http://jsfiddle.net/jwvha/1/

Код:

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some 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);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

ОНОВЛЕННЯ 21 СЕРПНЯ 2013 року

Як вимагається у коментарях, ось оновлений приклад із додатковим параметром, який вказує, чи слід вибрати вставлений вміст чи ні.

Демо: http://jsfiddle.net/timdown/jwvha/527/

Код:

function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some 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);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

1
@ think123: Ви можете використовувати таку функцію, як наведена нижче, щоб перевірити, чи виділення міститься в певному вузлі: stackoverflow.com/a/8340432/96100
Тім Даун

1
@tundoopani: Це тому, що jsFiddle розміщує pasteHtmlAtCaret ()функцію в onloadобробнику, де ніщо інше її не бачить. Дивіться jsfiddle.net/jwvha/211 для виправлення.
Тім Даун

5
@Matt: Використання document.execCommand()зазвичай працює зі стеком скасування браузера, тож ви можете використовувати document.execCommand("InsertHTML", false, "<b>Some bold text</b>"). Однак я не тестував, що скасування все одно буде працювати з цим, і IE не підтримує цю команду. Нарешті, у роботах є специфікація UndoManager, яка стане вирішенням цього в довгостроковій перспективі і починає впроваджуватися у браузерах: dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.html
Тім Даун

1
@Ced, віконний об'єкт iframe. Пробачте за посилання на цей сайт , але це найпростіший приклад, який я знайшов за 10 секунд, коли я шукав вас ...
gdoron підтримує Моніку

1
6 років потому, і це все ще ідеальне рішення. Дякую.
FullStackFool

13
var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
    range.surroundContents(nnode);
    nnode.innerHTML = "Some bold text";
};

1

читаючи швидко і сподіваючись не збігатися з теми, ось доріжка для тих, кому, як і мені, потрібно вставити код на рівні курсора div:

document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');

'редактор' - це iframe:

<iframe id="editeur" src="contenu_editeur_wysiwyg.php">
</iframe>

contenu_editeur_wysiwyg.php:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
</div>
</body>
</html>

не забувайте:

document.getElementById('editeur').contentDocument.designMode = "on";

-2
var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment('<b>Hello</b>'));

//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start 
getSelection().collapseToEnd() 

Це не буде працювати для вмісту, доданого в середині введення, наприклад, виділення після вставки завжди рухатиметься до кінця.
Маріо Естрада
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.