contenteditable выделенный текст сохранить и восстановить

Я наткнулся на это сообщение, которое показывает две функции о том, как сохранять и восстанавливать выделенный текст из contenteditable div. У меня ниже установленный div как контент, доступный, и функция 2 из другого сообщения. Как использовать эти функции для сохранения и восстановления выбранного текста.contenteditable выделенный текст сохранить и восстановить

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

источник

2011-01-14 Hussein

Вы должны использовать методы объекта Range (см Mozilla doc: https://developer.mozilla.org/en/DOM/range). В основном, диапазон состоит из узла и смещения внутри этого узла. Одним из способов сохранения HTML вместе с диапазоном является использование «шаблонов» (см. «Библиотека Closure для идей: http://closure-library.googlecode.com/svn/docs/class_goog_dom_SavedCaretRange.html). – yonran

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

Вот простой пример. Он отображает текстовый ввод и перезаписывает выделение в редактируемом <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-14 10:25:03

+1, я искал именно это решение. Спасибо, что ты сделал мой день. –

@TimDown - Тим, как бы вы использовали 'saveSelection()' и 'restoreSelection (range)' таким образом, чтобы вы могли нацелить 'contenteditable div'? т. е. это похоже на saveSelection ('mycontentId') 'и restoreSelection (диапазон, 'mycontentId')? Я пытаюсь использовать его на двух отдельных «div», и мне нужно настроить таргетинг на каждого? Есть ли способ включить 'getElementById' в две функции, чтобы я мог нацелиться? – Andy

@ Andy: выбор привязан к документу, а не отдельным элементам, но нет ничего, чтобы остановить вас, сохраняя несколько разных вариантов. Не могли бы вы привести конкретный пример того, чего вы хотели бы достичь? –

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

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

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

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

источник

2013-06-27 22:33:28 Nedudi

contenteditable выделенный текст сохранить и восстановить

ответ

Смежные вопросы