获取 #document-fragment 的 innerHTML 而不是 textContent

Question

我有一个 contenteditable p 标签。当提取 p 标签的内容并将其插入另一个标签时，原始标签的所有标记都将丢失。有什么方法可以保存标记吗？

请注意，如果 插入符号位于段落中的第 i 个 位置，则 个字符将从该位置开始提取到结尾.

function select() {
    var el = document.getElementById('p');
    el.focus();

    var sel = window.getSelection();
    var selRange = sel.getRangeAt(0);

    var range = selRange.cloneRange();
    range.selectNodeContents(el);
    range.setStart(selRange.endContainer, selRange.endOffset);

    document.getElementById('other').innerHTML = (range.extractContents().textContent);
    // return range.extractContents().textContent;
}

p {
 background-color: #eee;
}

.red {
  color: red;
}

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>

Answer 1

你不是这个意思吗？

document.getElementById('other').innerHTML = el.innerHTML;

你的 javascript 会很简单：

function select() {
    var el = document.getElementById('p');
    el.focus();

    document.getElementById('other').innerHTML = el.innerHTML;
}

编辑：

嘿，你对我的回答投了反对票，但你能解释一下你想要实现的目标吗？我上面写的代码你可以在这个 jsfiddle 中看到：https://jsfiddle.net/936zuzky/1/

您想保存原始标记 - 它已保存，您想要实现什么？

Answer 2

range.extractContents() returns a DocumentFragment.

DocumentFragment 没有 innerHTML property. innerHTML comes from the Element interface, while textContent is part of the Node 接口。 DocumentFragment 继承自 Node，但不继承 Element。

这意味着您可以附加整个片段，因为它是 Node:

function select() {
  var el = document.getElementById('p');
  el.focus();

  var sel = window.getSelection();
  var selRange = sel.getRangeAt(0);

  var range = selRange.cloneRange();
  range.selectNodeContents(el);
  range.setStart(selRange.endContainer, selRange.endOffset);

  //document.getElementById('other').innerHTML = (range.extractContents().textContent);
  var frag = range.extractContents();
  var i;
  var node;
  var other = document.getElementById('other');
  other.innerHTML = '';
  other.appendChild(frag);
}

p {
 background-color: #eee;
}

.red {
  color: red;
}

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>

Answer 3

供进一步参考，如果有人确实需要提取片段的 innerHTML。

该片段有子节点，那些子节点有 outerHTML 属性，因此您只需从所有子节点

中获取 outerHTML

const fragment = range.extractContents();
const htmlContent = [].map.call(fragment.childNodes, x => x.outerHTML).join('')

map.call 部分是必需的，因为尽管该片段具有 childNodes 属性，但 childNodes 没有 map 方法。

获取 #document-fragment 的 innerHTML 而不是 textContent

Get innerHTML of #document-fragment instead of textContent

html

javascript

css

contenteditable