我有一个 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>
最佳答案
range.extractContents()
返回 DocumentFragment
.
DocumentFragment
没有 innerHTML
属性(property)。 innerHTML
来自 Element
界面,同时 textContent
是 Node
的一部分界面。 DocumentFragment
继承自 Node
,但不是 Element
。
这意味着您可以附加整个片段,因为它是一个节点
:
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>
关于javascript - 获取#document-fragment 的 innerHTML 而不是 textContent,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36653316/