contenteditable选定的文本保存和恢复

Question

我发现这篇文章显示了如何从一个可信的div中保存和恢复所选文本的2个功能.我有下面的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>

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