contentEditable div без фокуса после замены текста

Question

У меня есть contentEditable div, который в некоторых случаях replaces text with images.Это работает, но когда он заменяет определенный текст изображением, div теряет фокус, и я не могу ничего написать, как заставить его работать?

Answer 1

contentEditable области кажутся глючными при прямой замене innerHTML фактическими элементами HTML.Вместо этого вам придется выполнить низкоуровневую замену узла созданным элементом:

function Replace(element) {
    var someText = 'some_text',
        index, child, img;

    // traverse nodes
    for (var i = 0, il = element.childNodes.length; i < il; i++) {
        child = element.childNodes[i];

        // if an element node
        if (child.nodeType == 1) {

            // recurse
            Replace(child);

        // if a text node
        } else if (child.nodeType == 3) {
            index = child.data.indexOf(someText);
            if (index >= 0) {

                // create img element
                var img = document.createElement('img'),
                    sel, rng;
                img.src = "src.gif";

                // split target text into its own node and replace with img
                child.splitText(index);
                child.nextSibling.splitText(someText.length);
                child.parentNode.replaceChild(img, child.nextSibling);

                // BONUS CODE!
                // move cursor to the end of the editable area
                if (document.createRange) {
                    rng = document.createRange();
                    rng.selectNodeContents(element);
                    rng.collapse(false);
                    sel = window.getSelection();
                    sel.removeAllRanges();
                    sel.addRange(rng);
                } else if (document.selection) {
                    rng = document.body.createTextRange();
                    rng.moveToElementText(element);
                    rng.collapse(false);
                    rng.select();
                }
            }
        }
    }
}

См. Демонстрацию