Javascript 内容可编辑选定文本保存和还原

我在这篇文章中看到了两个函数，分别介绍了如何保存和恢复contenteditable分区中选定的文本。我将下面的分区设置为contenteditable，并将另一篇文章中的2个函数设置为contenteditable。如何使用这些功能保存和恢复选定的文本

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>

<script>
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
</script>

测试
函数saveSelection（）{
if（window.getSelection）{
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
返回sel.getRangeAt（0）；
}
}else if（document.selection&&document.selection.createRange）{
return document.selection.createRange（）；
}
返回null；
}
功能恢复选择（范围）{
如果（范围）{
if（window.getSelection）{
sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（document.selection&&range.select）{
range.select（）；
}
}
}

典型的用法是显示某种小部件或对话框，以接受用户的输入（从而可能破坏原始选择），并在小部件被隐藏后恢复选择。实际上使用这些函数很简单；最大的危险是在选择被破坏后试图保存它

这里有一个简单的例子。它显示一个文本输入，并用该输入的文本覆盖可编辑的

中的选择。这里有太多的代码要粘贴，所以下面是完整的代码：

摘录：

<div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();"
    value="Insert text">
<div id="textInserter">
    <input type="text" id="textToInsert">
    <input type="button" onclick="insertText()" value="Insert">
</div>

<script type="text/javascript">
var selRange;

function displayTextInserter() {
    selRange = saveSelection();
    document.getElementById("textInserter").style.display = "block";
    document.getElementById("textToInsert").focus();
}     

function insertText() {
    var text = document.getElementById("textToInsert").value;
    document.getElementById("textInserter").style.display = "none";
    restoreSelection(selRange);
    document.getElementById("test").focus();
    insertTextAtCursor(text);
}
</script>

一些可编辑文本
变量选择范围；
函数displayTextInserter（）{
selRange=saveSelection（）；
document.getElementById（“textInserter”）.style.display=“block”；
document.getElementById（“textToInsert”）.focus（）；
}     
函数insertText（）{
var text=document.getElementById（“textToInsert”）.value；
document.getElementById（“textInserter”）.style.display=“无”；
恢复选择（选择范围）；
document.getElementById（“test”）.focus（）；
插入文本光标（文本）；
}

只有一条建议：

很难从头开始使用本机浏览器选择+内容可编辑+处理所有不同的浏览器特性+保存和恢复选择等

我想推荐朗吉 那是专门为你做的精心挑选的工作

查看文档，使用方便；）

---

希望它能帮助您使用Range对象的方法（请参阅mozilla文档：）。基本上，范围由一个节点和该节点内的偏移组成。保存HTML和范围的一种方法是使用“插入符号”（请参阅闭包库了解想法：）+1，我正是在寻找这个解决方案。谢谢你让我开心。@TimDown-Tim，你会如何使用

saveSelection（）

和

restoreSelection（range）

来定位

contenteditable div

？i、 这就像saveSelection（'mycontentId'）和restoreSelection（range，'mycontentId'）？我试图在两个不同的div上使用它，我需要针对每个div？有没有办法将

getElementById

合并到这两个函数中，这样我就可以锁定目标？@Andy：选择绑定到文档，而不是单个元素，但是没有什么可以阻止您保存多个不同的选择。你能举一个具体的例子说明你想要实现什么吗？@TimDown-谢谢你的回答！：）基本上，试图通过elementId保存？例如，我可以在两个不同的elementId上调用并恢复它？i、 如saveSelection（'mycontentId'），然后restoreSelection（'mycontentId'），然后只需输入我要保存和恢复的elementId即可多次使用？我会使用你的很棒的插件rangy-然而，我真的只需要这个函数，库的大小可能太大了big@Andy字体哦，我明白你的意思了。我想我应该使用一个简单的对象作为散列：类似于

var-selectionsById={}；selectionsById['mycontentId']=saveSelection（）；恢复选择（selectionsById['mycontentId']）。