html div数据替换,在contenteditable div中替换innerHTML

小编典典

问题在于，Rangy的保存/恢复选择模块通过将不可见的标记元素插入到选择边界所在的DOM中来工作，然后您的代码会去除所有HTML标签，包括Rangy的标记元素(如错误消息所示)。您有两种选择：

转到DOM遍历解决方案为数字着色，而不是innerHTML。这将更可靠，但涉及更多。

实现基于字符索引的替代选择保存和还原。这通常很脆弱，但在这种情况下会做您想要的。

更新

我已经为Rangy(上面的选项2)取消了基于字符索引的选择保存/恢复。这有点粗糙，但是可以解决这种情况。它通过遍历文本节点来工作。我可以以某种形式将其添加到Rangy中。(

码：

function saveSelection(containerEl) {

var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};

var sel = rangy.getSelection(), range;

function traverseTextNodes(node, range) {

if (node.nodeType == 3) {

if (!foundStart && node == range.startContainer) {

start = charIndex + range.startOffset;

foundStart = true;

}

if (foundStart && node == range.endContainer) {

end = charIndex + range.endOffset;

throw stop;

}

charIndex += node.length;

} else {

for (var i = 0, len = node.childNodes.length; i < len; ++i) {

traverseTextNodes(node.childNodes[i], range);

}

}

}

if (sel.rangeCount) {

try {

traverseTextNodes(containerEl, sel.getRangeAt(0));

} catch (ex) {

if (ex != stop) {

throw ex;

}

}

}

return {

start: start,

end: end

};

}

function restoreSelection(containerEl, savedSel) {

var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};

range.collapseToPoint(containerEl, 0);

function traverseTextNodes(node) {

if (node.nodeType == 3) {

var nextCharIndex = charIndex + node.length;

if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {

range.setStart(node, savedSel.start - charIndex);

foundStart = true;

}

if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {

range.setEnd(node, savedSel.end - charIndex);

throw stop;

}

charIndex = nextCharIndex;

} else {

for (var i = 0, len = node.childNodes.length; i < len; ++i) {

traverseTextNodes(node.childNodes[i]);

}

}

}

try {

traverseTextNodes(containerEl);

} catch (ex) {

if (ex == stop) {

rangy.getSelection().setSingleRange(range);

} else {

throw ex;

}

}

}

function formatText() {

var el = document.getElementById('pad');

var savedSel = saveSelection(el);

el.innerHTML = el.innerHTML.replace(/(]+)>)/ig,"");

el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"$1");

// Restore the original selection

restoreSelection(el, savedSel);

}

2020-05-01