nội dung đã chọn có thể chỉnh sửa có thể chỉnh sửa và khôi phục

Question

Tôi đã xem bài đăng này cho thấy 2 chức năng về cách lưu và khôi phục văn bản đã chọn từ div được chỉnh sửa nội dung. Tôi có bộ div bên dưới là có thể chỉnh sửa được và chức năng 2 từ bài đăng khác. Làm thế nào để tôi sử dụng các chức năng này để lưu và khôi phục văn bản đã chọn.

<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

Một sử dụng điển hình sẽ được hiển thị một số loại phụ tùng hoặc hộp thoại để nhận tín hiệu vào từ người dùng (do đó có khả năng phá hủy các lựa chọn ban đầu) và khôi phục lại các lựa chọn sau widget mà đã bị ẩn. Trên thực tế sử dụng các chức năng khá đơn giản; mối nguy hiểm lớn nhất là cố gắng để lưu các lựa chọn sau khi nó đã bị phá hủy.

Dưới đây là một ví dụ đơn giản. Nó hiển thị một kiểu nhập văn bản và ghi đè vùng chọn trong số <div> có thể chỉnh sửa với văn bản từ đầu vào đó. Có quá nhiều mã để dán vào đây, vì vậy đây là mã đầy đủ: 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> 

Answer 2

chỉ là một đề nghị:

rất khó để làm việc với lựa chọn trình duyệt nguồn gốc + contenteditable + xử lý tất cả các khía cạnh trình duyệt khác nhau + lưu và khôi phục lựa chọn và v.v .. từ đầu ..

Tôi sẽ giới thiệu rangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
mà đặc biệt thực hiện để làm tất cả công việc khó khăn với sự lựa chọn cho bạn

kiểm tra các tài liệu, nó rất dễ dàng để sử dụng;) hy vọng nó sẽ giúp bạn