Консолидированное выделенное сохранение и восстановление текста

Я столкнулся с этим сообщением, в котором показаны две функции о том, как сохранять и восстанавливать выделенный текст из contenteditable div. У меня ниже установленный div как контент, доступный, и функция 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>

Ответ 1

Типичное использование будет отображать какой-то виджет или диалог, чтобы принимать входные данные от пользователя (таким образом, потенциально разрушая исходный выбор) и восстанавливая выбор после того, как этот виджет был скрыт. Фактически использование функций довольно просто; самая большая опасность заключается в том, чтобы сохранить выбор после того, как он уже был уничтожен.

Вот простой пример. Он отображает текстовый ввод и перезаписывает выделение в редактируемом <div> текстом с этого ввода. Там слишком много кода для вставки здесь, так что здесь полный код: http://www.jsfiddle.net/timdown/cCAWC/3/

Extract:

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

Ответ 2

только одна рекомендация:

трудно работать с собственным выбором браузера + contenteditable + обрабатывать все различные аспекты браузера + сохранять и восстанавливать выбор и т.д. с нуля.

Я бы рекомендовал rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
что специально сделано, чтобы сделать всю тяжелую работу с выбором для вас

проверить документы, легко использовать;) надеюсь, что это поможет вам