在contenteditable div中替换innerHTML

在contenteditable div中替换innerHTML

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

1. 转到DOM遍历解决方案为数字着色，而不是

   innerHTML

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

更新

我已经为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,"<font color='red'></font>");    // Restore the original selection    restoreSelection(el, savedSel);}