有没有一种方法可以防止execCommand("insertHTML")删除chrome中的属性? [英] Is there a way to keep execCommand("insertHTML") from removing attributes in chrome?

问题描述

上下文是Chrome 37.0.2062.120 m.

Context is Chrome 37.0.2062.120 m.

我正在使用execCommand将html插入可编辑的div中.我的execCommand调用看起来像这样:

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

function insertHTML(){
    document.execCommand('insertHTML', false, '<span id="myId">hi</span>');
}

当可编辑的div如下所示时:

When the editable div looks like this:

<div contenteditable="true">
    some [insertion point] content
</div> 

然后我使用execCommand将html插入到一个contenteditable div中，HTML的所有属性均按预期插入，最终得到这样的结果:

and I use execCommand to insert html into a contenteditable div, all of the attributes of the HTML are inserted as expected and I end up with this:

<div contenteditable="true">
    some <span id="myId">hi</span> content
</div> 

但是，当我将完全相同的html插入此结构中时:

When, however, I insert the exact same html into this structure:

<div contenteditable="true">
    some content
    <div>more [insertion point] content</div>
</div>

属性从插入的跨度中删除，最终看起来像这样:

The attributes are removed from the span being inserted and it ends up looking like this:

<div contenteditable="true">
    some content
    <div>more <span style="font-size: 10pt;">hi</span> content</div>
</div>

有什么办法可以防止这种情况发生?

Is there any way to keep this from happening?

推荐答案

在这种情况下，我建议使用

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>

这篇关于有没有一种方法可以防止execCommand("insertHTML")删除chrome中的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！