Cách lấy HTML trước, bên trong và sau khi chọn (không phải trong vùng văn bản)?

Question

Dưới đây là những gì tôi đang cố gắng thực hiện: Khi người dùng sử dụng chuột, bàn phím hoặc chạm để chọn văn bản bên trong "myDiv", tôi muốn có ba đoạn mã HTML kín đáo: HTML trước khi lựa chọn (ở bên trái " của nó), HTML bên trong lựa chọn và HTML sau khi lựa chọn (đến "quyền" của nó). Html nên như nó sẽ xuất hiện với myDiv.innerHTML.

Lựa chọn có thể bắt đầu hoặc kết thúc bên trong một cặp thẻ (nghĩa là lựa chọn được tách biệt không nhất thiết là HTML hợp lệ). Tôi không cần phải đối phó với các tình huống đặc biệt như các yếu tố vị trí tuyệt đối trong vùng lựa chọn; tất cả các lựa chọn mà tôi quan tâm sẽ bị hạn chế đối với một div sẽ chứa các thẻ cơ bản như mạnh, em, ul, ol, h1, hình ảnh và bảng.

Gần nhất tôi đến là sử dụng rangy để chọn lựa và gọi selection.getRangeAt(0).cloneContents() để nhận HTML lựa chọn. Điều này hoạt động đủ tốt cho đến khi tôi thực hiện lựa chọn không hợp lệ trong sự cô lập và trình duyệt thay đổi HTML của đoạn tài liệu để làm cho nó đánh dấu hợp lệ.

thêm thông tin: Dưới đây là lý do tại sao tôi cần điều này:

tôi đang tạo ra một hệ thống thông tin phản hồi tài liệu, vì vậy tôi cần phải lưu các thông tin lựa chọn một cơ sở dữ liệu để thu hồi sau và pha. Thông thường tôi sẽ lưu vùng chọn bằng cách sử dụng đường dẫn DOM và văn bản đã chọn, nhưng văn bản có thể thay đổi giữa lưu và hoàn nguyên. Ví dụ, tác giả có thể di chuyển toàn bộ các đoạn văn xung quanh, xóa các phần, vv Đường dẫn DOM trở nên khá vô ích sau đó.

Vì vậy, kế hoạch (không hoàn hảo) của tôi là lưu trữ vùng chọn dưới dạng [offset, length, html_snippet]. Đó là "vị trí". Tôi cũng sẽ lưu trữ các đoạn mã html đến trực tiếp trước và sau văn bản đã chọn. Đây là "ngữ cảnh".

Sử dụng kết hợp các dữ liệu này tôi có thể định vị lại văn bản đã chọn ban đầu hầu hết thời gian, ngay cả khi nó đã di chuyển hoặc thay đổi một phần. Khi điều đó không thành công, giao diện người dùng sẽ có cách để giải quyết nó, nhưng tôi muốn điều đó xảy ra càng ít càng tốt.

Superthanks!

Answer 1

Tôi có một số câu hỏi:

1. Khi bạn nói 'html sau khi lựa chọn' - làm thế nào sẽ html rằng có bất kỳ khác với html trước để lựa chọn hoặc ngược lại? Liệu quá trình 'lựa chọn' có giả mạo html vì 'kịch bản' của bạn hay bất kỳ thứ gì không?

2.- Bạn nói rằng các lựa chọn văn bản không diễn ra trong văn bản ... bạn đang làm việc với các yếu tố nào? đoạn văn? divs ...? Thu hẹp nó sẽ giúp ích.

3.- Bạn đã nghĩ đến việc sử dụng jquery chưa?

http://api.jquery.com/select/

làm điều gì đó như

$('#element_with_text_goes_here').select(function() { 

//apply grabbing functions here, for example 

//copy html 'before' selection: 
    $pre_html = $('html').clone(); 

    // copy selection...see below: 

    // copy html 'after' selection'...same as before 


}); 

Sao chép lựa chọn:

Như đã đề cập ở đây:

Selecting text in an element (akin to highlighting with your mouse)

Jason viết hàm sau:

function selectText(element) { 
    var doc = document; 
    var text = doc.getElementById(element);  

    if (doc.body.createTextRange) { // ms 
     var range = doc.body.createTextRange(); 
     range.moveToElementText(text); 
     range.select(); 
    } else if (window.getSelection) { // moz, opera, webkit 
     var selection = window.getSelection();    
     var range = doc.createRange(); 
     range.selectNodeContents(text); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Với một bản demo trực tiếp làm việc có thể được tìm thấy ở đây: http://jsfiddle.net/edelman/KcX6A/339/

Và một plugin phiên bản jquery ở đây: http://jsfiddle.net/edelman/KcX6A/340/

nào bạn có thể sử dụng cho các obtention của văn bản đã chọn. Bạn sẽ chỉ phải tinh chỉnh nó cho phù hợp kể từ khi anh ta tiếp cận nó từ một góc đảo ngược. Chi tiết bạn có thể cung cấp cho chúng tôi ... chúng tôi càng có thể trợ giúp tốt hơn.

Hope this helps
G

Answer 2

Mã này được html/text từ lựa chọn của người dùng, nhưng nó hoạt động chỉ trong IE. Mã hoạt động với lựa chọn thẻ chéo. (Globals sử dụng để giữ mã ngắn.)

<script> 
function selected(){ 
    thediv=document.getElementById('div'); 
    res=document.getElementById('htm'); 
    userSelection=document.selection; 
    userRange=userSelection.createRange(); 
    /* For wider scale of elements */ 
    // rangeParent=userRange.parentElement(); 
    // if(rangeParent!=thediv) userRange.moveToElementText(rangeParent); 
    rangeText=userRange.htmlText; // OR: rangeText=userRange.text; 
    res.innerText=rangeText;  
    return; 
}  
</script> 
</head>  
<body onload="document.onselectionchange=selected;"> 
<div id="div"> 
<h1>The great testpage</h1> 
<p>A paragraph with some text</p> 
<p>This paragraph <b>contains</b> a child element.</p> 
<p>And this is the last paragraph.</p> 
<table> 
<tr><td>Cell1-1</td><td>cell1-2</td></tr> 
<tr><td>Cell2-1</td><td>cell2-2</td></tr> 
</table> 
<ol> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
</ol> 
</div> 
<br> 
<span id="htm"></span> 
</body> 

Content trước & sau khi lựa chọn trong thediv bạn sẽ nhận được như thế này: prepost=thediv.innerHTML/innerText.split(rangeText);

Nếu trang chứa bất kỳ yếu tố khác nhưng thediv, họ phải được thực hiện không thể chọn.