Question

I have a contentEditable div which in some cases replaces text with images. It works but when it replaces specific text with an image the div lose focus, and I can’t write anything in, how to make it to work?

  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

contentEditable areas seem to be buggy when replacing the innerHTML with actual HTML elements directly. Instead, you’ll have to do low-level node replacement with a created element:

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

See demo