8

我遇到了这篇文章，它展示了 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>
4

2 回答 2

20

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

这是一个简单的例子。<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>
于 2011-01-14T10:25:03.617 回答
0

只有一个建议：

很难使用本机浏览器选择 + contenteditable + 处理所有不同的浏览器方面 + 从头开始​​保存和恢复选择等..

我会推荐rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
专门为您的选择做所有艰苦的工作

检查文档，它很容易使用；）希望对您有所帮助

于 2013-06-27T22:33:28.777 回答