Question

我有一个contentEditable div，在某些情况下replaces text with images。它有效，但是当它用图像替换特定文本时，div会失去焦点，我无法写任何内容，如何使其工作？

  obj.onfocus = function() {Replace(this)};
  obj.onblur = function() {Replace(this)};
  obj.onkeyup = function() {Replace(this)};
  obj.onkeydown = function() {Replace(this)};
  obj.onclick = function() {Replace(this)};

  function Replace(element)
  {
    element.innerHTML = element.innerHTML.replace(/some_text/gi, '<img src="image.." />')
  }

Answer 1

当直接用实际HTML元素替换innerHTML时，

contentEditable区域似乎有些错误。相反，您必须使用创建的元素进行低级节点替换：

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();
                }
            }
        }
    }
}

contentEditable div在文本替换后没有焦点

1 个答案:

See demo