contenteditable selected text kaydetmek ve geri yüklemek

Question

Bu yazıya rastladım, seçili metnin içerikli bir div dosyasından nasıl kaydedileceğine ve geri yükleneceğine ilişkin 2 işlevi gösterir. Ben aşağıdaki div diveranstable ve diğer yazıdan 2 fonksiyonu var. Seçilen metni kaydetmek ve geri yüklemek için bu işlevleri nasıl kullanırım.

<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

Tipik kullanım (bu şekilde potansiyel olarak orijinal seçimi yok) ve eklendi gizlendi sonra seçimi geri kullanıcı girişi kabul etmek aracının veya iletişim tür görüntülendiği olacaktır. Aslında işlevleri kullanmak oldukça basittir; En büyük tehlike, seçimi daha önce imha edildikten sonra kaydetmeye çalışıyor.

İşte basit bir örnek. Bir metin girişi görüntüler ve düzenlenebilir 'daki seçimin bu girişteki metnin üzerine yazar. Orada burada yapıştırmak için çok fazla kod, bu yüzden burada tam kod: http://www.jsfiddle.net/timdown/cCAWC/3/

Özü:

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

Answer 2

sadece bir öneri:

o yerel tarayıcı seçimi ile çalışmak zordur + contenteditable + işlemek tüm farklı tarayıcı yönlerini +

ben tavsiye ederim .. kaydedip seçimi ve sıfırdan vb restore rangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule Sen Menzil nesnesinin yöntemleri (mozilla bkz kullanmak gerekir bu size