Is there a way to keep execCommand(“insertHTML”) from removing attributes in chrome?

Question

Context is Chrome 37.0.2062.120 m.

I\'m using execCommand to insert html into an editable div. My execCommand call looks like this:

function inser         


        

Answer 1

One solution might be to not use span, i.e. use a non-span element. I have used the element <em> instead, to solve a similar problem with Chrome, because italics is fine by me - and as a consequence the <span>-fiddling "bug" in Chrome does not affect me. See discussion here: Discussion re CKEdit bug, but relevant here too

Answer 2

In this particular case I would suggest using Range.insertNode instead, which will give you total control of what gets inserted:

function insertHTML() {
    var sel, range;
    if (window.getSelection && (sel = window.getSelection()).rangeCount) {
        range = sel.getRangeAt(0);
        range.collapse(true);
        var span = document.createElement("span");
        span.id = "myId";
        span.appendChild( document.createTextNode("hi") );
        range.insertNode(span);

        // Move the caret immediately after the inserted span
        range.setStartAfter(span);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

function isOrIsAncestorOf(ancestor, descendant) {
  var n = descendant;
  while (n) {
    if (n === ancestor) {
      return true;
    } else {
      n = n.parentNode;
    }
  }
  return false;
}

function nodeContainsSelection(node) {
  var sel, range;
  if (window.getSelection && (sel = window.getSelection()).rangeCount) {
    range = sel.getRangeAt(0);
    return isOrIsAncestorOf(node, range.commonAncestorContainer);
  }
  return false;
}

function insertHTML() {
  var sel, range;
  if (window.getSelection && (sel = window.getSelection()).rangeCount) {
    range = sel.getRangeAt(0);
    range.collapse(true);
    var span = document.createElement("span");
    span.id = "myId";
    span.appendChild( document.createTextNode("hi") );
    range.insertNode(span);

    // Move the caret immediately after the inserted span
    range.setStartAfter(span);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

window.onload = function() {
  document.getElementById("inserter").onmousedown = function() {
    var editor = document.getElementById("editor");
    if (nodeContainsSelection(editor)) {
      insertHTML();
      return false;
    }
  };
};

span {
  font-weight: bold;
  color: green;
}

<input type="button" id="inserter" value="Insert span">
<div contenteditable="true" id="editor">
    some content
</div>