contenteditable 选定的文本保存和恢复答案

【问题标题】：contenteditable selected text save and restorecontenteditable 选定的文本保存和恢复
【发布时间】：2011-06-08 22:30:29
【问题描述】：

我遇到了这篇文章，其中展示了 2 个关于如何从内容可编辑的 div 中保存和恢复选定文本的功能。我将以下 div 设置为 contenteditable 和另一篇文章中的 2 函数。我如何使用这些功能来保存和恢复选定的文本。

<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>

【问题讨论】：

您需要使用 Range 对象的方法（参见 mozilla 文档：developer.mozilla.org/en/DOM/range）。基本上，范围由一个节点和该节点内的偏移量组成。将 HTML 与范围一起保存的一种方法是使用“插入符号”（有关想法，请参阅闭包库：closure-library.googlecode.com/svn/docs/…）。

标签： javascript text contenteditable selected

【解决方案1】：

一个典型的用途是显示某种小部件或对话框来接受用户的输入（因此可能会破坏原始选择）并在该小部件被隐藏后恢复选择。实际上使用这些功能非常简单；最大的危险是在选择已经被销毁后尝试保存它。

这是一个简单的例子。它显示一个文本输入，并用来自该输入的文本覆盖可编辑<div> 中的选择。代码太多要贴在这里，完整代码如下：http://www.jsfiddle.net/timdown/cCAWC/3/

摘录：

<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>

【讨论】：

+1，我正在寻找这个解决方案。谢谢你让我开心。
@TimDown - Tim，您将如何使用 saveSelection() 和 restoreSelection(range) 来定位 contenteditable div ？也就是说，它就像 saveSelection('mycontentId')` 和 restoreSelection(range, 'mycontentId') ？我试图在两个单独的 'div' 上使用它，我需要针对每个？有没有办法将getElementById 合并到这两个函数中，以便我可以定位？
@Andy：选择绑定到文档，而不是单个元素，但没有什么可以阻止您保存多个不同的选择。你能举一个具体的例子来说明你想要实现的目标吗？
@TimDown - 感谢您的回复！ :) 基本上，试图通过 elementId 保存？例如，我可以在 2 个不同的 elementId 上调用并恢复它吗？即像 saveSelection('mycontentId') 然后 restoreSelection('mycontentId') 然后只需输入我要保存和恢复的 elementId 多次使用它？我会使用你很棒的插件 rangy - 但是，我真的只需要这个函数，而且库的大小可能太大了
@Andy：哦，我明白你的意思了。我想我会使用一个简单的对象作为哈希：类似var selectionsById = {}; selectionsById['mycontentId'] = saveSelection(); restoreSelection(selectionsById['mycontentId']);。

【解决方案2】：

只有一个建议：

很难使用原生浏览器选择 + 内容可编辑 + 处理所有不同的浏览器方面 + 从头开始保存和恢复选择等..

我会推荐 rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
专门为您精心挑选的所有工作

查看文档，它很容易使用；）希望对你有帮助

【讨论】：