ExecCommand hoạt động không chính xác trong Chrome 60 sau khi xóa nút khỏi phạm vi lựa chọn

Question

Chúng tôi đã phát hiện ra một trường hợp khá phức tạp khi gỡ lỗi phiên bản cũ của trình chỉnh sửa Redactor. Trong hai từ, việc xóa nút span khỏi phạm vi lựa chọn dẫn đến hành vi không chính xác của execCommand trong Chrome v60, mặc dù trong Firefox và Chrome v58 hoạt động chính xác.

Đây là vấn đề tái tạo sự cố: https://jsfiddle.net/47wqpv1f/4/.

Chọn một từ và nhấn nút. Bạn có thể thấy ở đây rằng trong Firefox và Chrome 58 văn bản sẽ được striked thông qua trong khi trong Chrome 60 nó vẫn còn bị ảnh hưởng.

Trên hành động định dạng, ví dụ: Bold, trình chỉnh sửa bao quanh phạm vi lựa chọn với hai phần tử "điểm đánh dấu" khác nhau.

var range2 = range.cloneRange(); 
    var marker = document.createElement('span'); 
    marker.id="selection-marker-1"; 
    marker.className="redactor-selection-marker"; 
    marker.innerHTML = markerHTML; 

    range2.collapse(true); 
    range2.insertNode(marker); 

Sau đó, trình chỉnh sửa thực hiện một số thao tác với lựa chọn và sau đó đặt lại lựa chọn để khớp với ranh giới điểm đánh dấu.

range.setStart(document.getElementById('selection-marker-1'), 0); 
    range.setEnd(document.getElementById('selection-marker-2'), 0); 

Sau khi trình chỉnh sửa đó xóa các nút đánh dấu, theo ý tưởng nên duy trì lựa chọn ban đầu.

marker.parentNode.removeChild(marker); 
    marker2.parentNode.removeChild(marker2); 

Tiếp theo, trình chỉnh sửa sẽ thêm lại điểm đánh dấu cho bước tiếp theo của quy trình định dạng và sau đó thực hiện execCommand để thực hiện.

Chrome 60 sẽ chỉ thêm strike thẻ vào điểm đánh dấu bên trái, trong khi các trình duyệt được đề cập khác sẽ quấn strike xung quanh toàn bộ lựa chọn (đây là hành vi mong đợi đối với tôi trong trường hợp này).

Tôi có thể nghĩ cách giải quyết khác nhau ở đây nhưng lý do thực sự của việc thay đổi hành vi trong Chrome mới là gì?

Answer 1

Đây có thể chỉ là lỗi trong Chrome, nhưng lưu ý rằng theo thông số kỹ thuật (https://w3c.github.io/editing/execCommand.html) execCommand đang ở dạng dự thảo và được mong đợi ở lại đó. Nó được hỗ trợ, nhưng có thể không được hỗ trợ chính xác theo cùng một cách trong mọi trình duyệt. Không có đặc điểm kỹ thuật vững chắc để thực hiện, việc triển khai có thể thay đổi, ngay cả trên các phiên bản trình duyệt và đặc biệt là từ trình duyệt này đến trình duyệt khác.

Dài hạn, bạn có thể sẽ có nhiều thành công hơn bằng cách sử dụng các triển khai sử dụng các tiêu chuẩn được xác định tốt hơn (một thách thức, để chắc chắn!) Vì chúng ít mục tiêu di chuyển hơn!