window.getSelection() cho tôi văn bản đã chọn, nhưng tôi muốn HTML

Question

Tôi đang mở rộng trình soạn thảo HTML WYSIWYG (dành cho Firefox), tôi muốn thêm các thẻ xung quanh lựa chọn. Tôi không thể tìm thấy chức năng để thực hiện điều này trong Mozilla Midas specification.

Có lệnh để thay thế lựa chọn bằng HTML.
Vì vậy, nếu tôi có thể đọc nội dung lựa chọn, tôi có thể thêm các thẻ của mình vào chuỗi này.

window.getSelection() hầu hết hoạt động, nhưng nó mang lại cho tôi nsISelection mà chuyển đến một chuỗi văn bản đơn giản.

PS: document.getSelection() trả về chuỗi văn bản thuần túy không phải là nsISelection.

Answer 1

Hãy xem qua số DOM Range spec. Bạn có thể có được một Range từ sự chọn lựa sử dụng trong Firefox sử dụng:

var range = window.getSelection().getRangeAt(0); 

Lưu ý rằng một số trình duyệt như Firefox, cho phép nhiều lựa chọn, có thể được truy cập thông qua các phương pháp getRangeAt() của vùng chọn.

Range được thể hiện dưới dạng các nút DOM và khoảng bù trong các nút đó. Khi bạn đã có Range, không đơn giản để thực hiện chính xác những gì bạn muốn, vì ranh giới của phạm vi có thể ở các nút khác nhau ở các cấp khác nhau của cây DOM, vì vậy chỉ cần bao quanh nội dung của Phạm vi bằng thẻ không phải lúc nào cũng có thể. Bạn có thể làm điều gì đó như sau, mặc dù nó sẽ tạo ra một yếu tố khối mới để chứa các nội dung được lựa chọn:

var range = window.getSelection().getRangeAt(0); 
var selectionContents = range.extractContents(); 
var div = document.createElement("div"); 
div.style.color = "yellow"; 
div.appendChild(selectionContents); 
range.insertNode(div); 

khác, hacky, thay thế là sử dụng phương pháp execCommand() của document để thay đổi lựa chọn (ví dụ: bằng cách đặt nó thành một màu cụ thể) và sau đó sử dụng document.querySelectorAll hoặc một số thư viện bộ chọn để chọn các phần tử có màu đó và sau đó áp dụng kiểu cho chúng.

Answer 2

Câu trả lời của Tim Down đang đi đúng hướng. Tuy nhiên một vấn đề là extractContents() sẽ loại bỏ các lựa chọn từ dom. Bạn có thể sử dụng

window.getSelection().getRangeAt(0).cloneContents(); 

để chỉ nhận bản sao của những gì được chọn. Sau đó, bạn có thể bọc thẻ đó bằng thẻ mới của mình và sau đó thay thế lựa chọn bằng thẻ đó. Mối quan tâm của Tim Down về phạm vi bao trùm nhiều phần tử HTML chắc chắn là một yếu tố hợp lệ. Tôi nghĩ rằng một khi bạn nhận được phạm vi, nó 'sửa' lên html, nhưng khi bạn đặt nó trở lại trong nó có thể gây ra vấn đề. Here là một nguồn tài nguyên tốt trên đối tượng Phạm vi.

Answer 3

window.getSelection() sẽ trả về một đối tượng. Bạn có thể sử dụng đối tượng selection được trả về như một chuỗi bằng cách gọi phương thức .toString() của đối tượng.

var selObj = window.getSelection(); 
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection