Chèn Thẻ Tùy chỉnh vào Lựa chọn Người dùng

Question

Tôi muốn chèn các thẻ và tập lệnh tùy chỉnh của riêng mình xung quanh văn bản đã chọn. Một cái gì đó như thế này

var range = window.getSelection().getRangeAt(0); 
var sel = window.getSelection(); 
range.setStart(sel.anchorNode, sel.anchorOffset); 
range.setEnd(sel.focusNode,sel.focusOffset); 

highlightSpan = document.createElement("abbr"); 
highlightSpan.setAttribute("style","background-color: yellow;"); 
highlightSpan.setAttribute("onmouseout","javascript:HideContentFade(\"deleteHighlight\");"); 
highlightSpan.setAttribute("onmouseover","javascript:ShowHighlighter(\"deleteHighlight\",\""+id_val+"\");"); 
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan); 

Điều này hoạt động trong các trường hợp bình thường nhưng nếu tôi chọn một số đoạn văn bản khác, thì HTML sẽ trả về và đặt thêm thẻ để làm cho HTML hợp lệ. Tôi muốn HTML chính xác đã được chọn mà không có xác thực bổ sung mà javascript đã làm.

Có cách nào để thực hiện điều này không? Tôi đã thử nó theo cách được đề cập trong How can I highlight the text of the DOM Range object? nhưng điều là tôi muốn người dùng nổi bật cụ thể nên nếu A đã thêm một số điểm nổi bật B không thể nhìn thấy nó. Đối với điều này tôi có sẵn mã phụ trợ của tôi.

Answer 1

Nếu bạn gói bằng thẻ văn bản đã chọn thuộc về các đoạn văn khác nhau, bạn tạo mã HTML không hợp lệ.

Đây là ví dụ về mã HTML không hợp lệ mà bạn sẽ tạo.

<p>notselected <span>selected</p><p>selected</span> notselected</p> 

Để thực hiện nhiệm vụ, bạn cần phải gắn thẻ với mỗi văn bản trong mỗi đoạn của lựa chọn tạo ra mã như thế này.

<p>notselected <span>selected</span></p><p><span>selected</span> notselected</p> 

Để thực hiện điều này, bạn phải duyệt qua tất cả các nút chọn và quấn văn bản đã chọn như thế này:

function wrapSelection() { 
    var range, start, end, nodes, children; 

    range = window.getSelection().getRangeAt(0); 
    start = range.startContainer; 
    end = range.endContainer; 

    children = function (parent) { 
     var child, nodes; 

     nodes = []; 
     child = parent.firstChild; 

     while (child) { 
      nodes.push(child); 
      nodes = nodes.concat(children(child)); 
      child = child.nextSibling; 
     } 

     return nodes; 
    } 

    nodes = children(range.commonAncestorContainer); 
    nodes = nodes.filter(function (node) { 
     return node.nodeType === Node.TEXT_NODE; 
    }); 
    nodes = nodes.slice(nodes.indexOf(start) + 1, nodes.indexOf(end)); 
    nodes.forEach(function (node) { 
     wrap = window.document.createElement("span"); 
     node.parentNode.insertBefore(wrap, node); 
     wrap.appendChild(node); 
    }); 

    start = new Range(); 
    start.setStart(range.startContainer, range.startOffset); 
    start.setEnd(range.startContainer, range.startContainer.length); 
    start.surroundContents(window.document.createElement("span")); 

    end = new Range(); 
    end.setStart(range.endContainer, 0); 
    end.setEnd(range.endContainer, range.endOffset); 
    end.surroundContents(window.document.createElement("span")); 
}