Вставьте текст в Javascript contenteditable div

Question

У меня проблема с тем, что мне нужно вставить текст (строка, может иметь или не иметь HTML-теги) в div. Это должен быть div, а не textarea.

Есть ли в любом случае, чтобы сделать это? Прежде всего мне нужно получить позицию курсора, а затем вставить текст в эту позицию.

Она похожа на функцию insertAdjacentText, но может вставлять только до или после тега и работает только в IE.

См. Этот URL: http://yart.com.au/test/iframe.aspx. Обратите внимание, как вы можете поместить курсор в элемент div, нам нужно добавить текст в месте расположения курсора.

Answer 1

Если все, что вам нужно сделать, это вставить HTML в текущую точку выделения / вставки, это выполнимо. С головы до головы (чтобы вы начали):

В IE используйте document.selection.createRange (). PasteHTML (theNewHTML).

В других браузерах вы можете использовать document.execCommand ("InsertHTML", ...).

Я использовал эти методы только в редактируемых iframes / документах, а не в div, но эти вызовы должны работать, если div сфокусирован, я считаю.

Как предупредил другой ответ, становится уродливым, если вам нужен более тонкий контроль, например, вставка текста в других местах.

Answer 2

Объекты Range и Selection

Используйте выбор и объектов диапазона . Они содержат все виды информации о текущем выборе и о том, где он находится в дереве узлов.

Справедливое предупреждение: Не совсем невозможно сделать то, что вы описываете, но если вы очень увлечетесь, вы будете в довольно глубокой воде странных особенностей браузера и несовместимости . Вам нужно будет сделать много обнаружения объектов , проверяя, чтобы убедиться, что у вас есть согласованные значения и методы. По мере развития проверяйте все свои браузеры. Удачи!

Answer 3

Вот кросс-браузерный пример, адаптированный из этого ответа для работы с фреймами.

function pasteHtmlAtCaret(html, selectPastedContent, iframe) {
    var sel, range;
    var win = iframe ? iframe.contentWindow : window;
    var doc = win.document;
    if (win.getSelection) {
        // IE9 and non-IE
        sel = win.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 = doc.createElement("div");
            el.innerHTML = html;
            var frag = doc.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 = doc.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();
        }
    }
}

Answer 4

Вы также можете использовать метод округления, используя insertImage. Вы вставляете поддельное изображение (или маленькое), используя execCommand «insertImage», затем вы используете Javascript для замены innerHTML для добавления текста.

Например:

iFrame.focus()
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg")
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!")

Принимая во внимание, что iFrame равен id предполагаемого iFrame. Или вы можете использовать слой DIV с помощью document.getElementById ("IDofDIVlayer"). InnerHTML

Обязательно сфокусируйтесь перед вызовом execCommand, иначе он может не работать в IE.

Этот метод работает и в IE. Испытано.