Phạm vi lựa chọn trong webkit (Safari/Chrome)

Question

Tôi đang sử dụng iframe có thể chỉnh sửa nội dung để tạo cú pháp đánh dấu cú pháp trong javascript và một trong những điều quan trọng nhất là có thể thụt lề mã đúng cách.

Các mã sau đây hoạt động giống như nó phải trong Firefox:

// Create one indent character 
var range = window.getSelection().getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 

Nó tạo ra một tab char và di chuyển con trỏ đến phía bên phải của nhân vật. Trong Chrome và Safari, ký tự được chèn nhưng con trỏ sẽ không di chuyển sang bên phải của ký tự đó.

Tôi đã kiểm tra đối tượng phạm vi trong cả Chrome và Firefox và sau đó nhận thấy đối tượng phạm vi của Firefox phong phú hơn nhiều so với Chrome. Tôi đã không thể ro tìm thấy bất kỳ thông số kỹ thuật của đối tượng phạm vi trong webkit.

Tôi làm cách nào để mã này hoạt động cho cả webkit và Firefox?

Cảm ơn bạn!

Answer 1

Cả đối tượng Phạm vi của Firefox và WebKit đều tuân thủ đầy đủ với DOM Range spec. Nếu Firefox có nhiều thuộc tính hơn thì chúng sẽ là các phần mở rộng của Mozilla, nhưng nói chung spec cung cấp mọi thứ bạn có thể cần.

Dù sao, vấn đề là bạn cần phải chọn lại phạm vi sau khi thay đổi nó:

// Create one indent character 
var sel = window.getSelection(); 
var range = sel.getRangeAt(0); 
var newTextNode = document.createTextNode(Language.tabChar); 
range.insertNode(newTextNode); 
range.setStartAfter(newTextNode); 
sel.removeAllRanges(); 
sel.addRange(range); 

Lưu ý rằng điều này sẽ không làm việc trong phiên bản đầu của Safari (trước khi phiên bản 3, tôi nghĩ), bởi vì nó đối tượng lựa chọn không hỗ trợ getRangeAt. Có một giải pháp cho việc này tôi có thể cung cấp nếu bạn cần.