сохраняемый и сохраняемый текст - PullRequest
Новая
       43

сохраняемый и сохраняемый текст

8 голосов
/ 14 января 2011

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

Ответы [ 2 ]

20 голосов
/ 14 января 2011

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

Вот простой пример. Он отображает текстовый ввод и перезаписывает выбор в редактируемом <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>
1 голос
/ 28 июня 2013

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

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

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

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

...