Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Tại sao execCommand không được dùng nữa và những gì trình soạn thảo trình duyệt sử dụng thay thế
· Cách thức hoạt động
html contenteditable developer-workflow
Đề cập đến sự tăng giảm của document.execCommand, tại sao kết quả đầu ra của nó không nhất quán và thay vào đó cách các trình soạn thảo hiện đại xây dựng dựa trên Lựa chọn, Phạm vi và trước đầu vào.
Nút in đậm một dòng không còn an toàn nữa — mở bằng execCommand('bold') và cảnh báo không dùng nữa
Nút in đậm có thể là một lệnh gọi: tập trung vào bề mặt chỉnh sửa, sau đó yêu cầu `document.execCommand` áp dụng `bold` cho lựa chọn hiện tại. ToolAcre vẫn sử dụng đường dẫn đó vì trình duyệt sở hữu dấu mũ và phạm vi được chọn bên trong phần tử có thể chỉnh sửa nội dung của nó. Cuộc gọi nhỏ gọn rất thuận tiện, nhưng sự tiện lợi không làm cho cây kết quả của nó có thể dự đoán được.
Mã coi việc từ chối là một khả năng bình thường. Trình bao bọc lệnh của nó bắt được một ngoại lệ, thông báo rằng trình duyệt đã từ chối hành động và hướng người viết sang chế độ nguồn. Dự phòng đó trung thực hơn là hứa hẹn rằng một cú nhấp chuột trên thanh công cụ luôn tạo ra một phần tử cụ thể hoặc hoạt động giống hệt nhau trong mọi công cụ.
execCommand đã làm gì và nó đến từ đâu - giải thích nguồn gốc của nó trong Internet Explorer thời kỳ đầu và việc mọi trình duyệt áp dụng nó
Trình bao bọc tương tự điều khiển các danh sách in đậm, in nghiêng, không có thứ tự và có thứ tự, xóa định dạng, hoàn tác, làm lại, chặn định dạng, liên kết và hủy liên kết. Đó là những lệnh thực sự hiện diện trên thanh công cụ; Bài viết này không mở rộng danh sách với căn chỉnh, màu sắc, phông chữ, bảng, hình ảnh hoặc các tính năng văn bản đa dạng thức quen thuộc khác mà quá trình triển khai không bao giờ lộ ra.
Mọi lệnh đều chạy theo DOM có thể chỉnh sửa trực tiếp. Sau đó, bảng điều khiển sẽ làm mới nguồn, bản xem trước, số từ và báo cáo xóa từ bên trongHTML hiện tại. Do đó, kết quả đã lưu không phải là nhật ký lệnh. Nó là một chuỗi tuần tự được lọc của bất kỳ cấu trúc nào mà trình duyệt để lại sau khi thực hiện hoặc từ chối thao tác được yêu cầu.
Tại sao lệnh API không được dùng nữa: trình duyệt có thể tạo ra các hình dạng DOM khác nhau
Việc khấu hao rất quan trọng vì API không cung cấp cho tác giả biên tập một hợp đồng cấu trúc chính xác cho mỗi đột biến. Giới hạn ToolAcre cảnh báo rõ ràng rằng hành vi khác nhau giữa các công cụ, đặc biệt là xung quanh các danh sách lồng nhau. Một danh sách hiển thị có thể được chấp nhận trong khi các lựa chọn lồng hoặc trình bao bọc của nó khác với đánh dấu mà trình duyệt khác tạo ra.
Không có nguồn kho lưu trữ nào hỗ trợ xác nhận rằng mọi trình duyệt, phiên bản hoặc lệnh đều có kết quả tương thích cụ thể. Tuyên bố an toàn hẹp hơn: việc triển khai này gọi API không được dùng nữa, phát hiện sự từ chối và cung cấp tính năng chỉnh sửa nguồn trực tiếp như một lối thoát. Kiểm tra trình duyệt và thao tác bạn định sử dụng thay vì ngoại suy ma trận.
Lựa chọn và Phạm vi là những lựa chọn thay thế phù hợp, nhưng công cụ này không triển khai chúng
Lựa chọn và Phạm vi có thể mô tả các ranh giới DOM đã chọn và hỗ trợ thao tác cây rõ ràng, nhưng ToolAcre không triển khai công cụ định dạng thay thế với chúng. Việc đặt tên các API đó như thể chúng là đường dẫn mã hiện tại sẽ mô tả sai sản phẩm. Ở đây, lệnh trình duyệt vẫn là trình biến đổi và trình khử trùng vẫn là ranh giới đầu ra.
Một mô hình tùy chỉnh có thể sở hữu nhãn hiệu, khối, giao dịch và ánh xạ lựa chọn, nhưng đó là một kiến trúc sản phẩm khác với các thử nghiệm khác nhau. Trình soạn thảo nhẹ nhàng này cố tình tránh việc yêu cầu những máy móc như vậy. Hợp đồng có thể xem xét của nó là các hành động trực quan có thể tạo DOM phụ thuộc vào trình duyệt, trong khi chế độ nguồn hiển thị đánh dấu đã lọc sẽ thực sự được sao chép hoặc tải xuống.
beforeinput không nằm trong đường dẫn định dạng của trình soạn thảo này
Việc triển khai cũng không chặn `beforeinput` chuyển ý định chỉnh sửa thành giao dịch tùy chỉnh. Các sự kiện đầu vào chỉ kích hoạt làm mới sau khi trình duyệt đã thay đổi bề mặt. Dán và thả là các trường hợp ngoại lệ: những sự kiện đó bị ngăn chặn, bảng nhớ tạm hoặc tải trọng truyền của chúng được lọc và chỉ HTML hoặc văn bản thuần túy thu được mới được chèn vào.
Sự khác biệt đó ngăn cản một yêu cầu kiến trúc rộng rãi. ToolAcre sở hữu cổng dán nhưng không sở hữu mọi đột biến gõ phím. Các thao tác gõ, xóa, nhập thông thường và các lệnh trên thanh công cụ vẫn là các thao tác chỉnh sửa trình duyệt. Chất khử trùng xem xét đầu ra được xuất bản theo chuỗi của họ; nó không biến trình soạn thảo thành một khung dựa trên đầu vào trước hoặc bình thường hóa mọi đột biến DOM trung gian.
Ví dụ đã hoạt động: kiểm tra đầu ra lệnh kế thừa mà trình soạn thảo này thực sự tạo ra
Để kiểm tra cụ thể, hãy nhập hai câu ngắn, chọn một cụm từ và nhấn Bold. Chuyển sang nguồn HTML và kiểm tra phần tử xung quanh cụm từ đó. ToolAcre ánh xạ kế thừa `b` tới `strong` trong quá trình dọn dẹp, do đó, kết quả được lọc có thể mang tính ngữ nghĩa ngay cả khi lệnh chỉnh sửa trực tiếp ban đầu đã chọn thẻ cũ.
Lặp lại với một danh sách và sau đó hoàn tác. Thanh công cụ gửi `insertUnorderedList` và `undo`; nó không duy trì một lịch sử ứng dụng riêng biệt. Nếu trình duyệt từ chối, vùng trạng thái sẽ thông báo như vậy. Nếu việc lồng ghép có vẻ kỳ lạ thì chế độ nguồn là đường dẫn hiệu chỉnh được hỗ trợ. Đầu ra được quan sát, không phải nhãn nút, là bằng chứng.
Điều này không bao gồm: không có kiến trúc trình soạn thảo thay thế nào được triển khai ở đây
Bài viết này không yêu cầu hỗ trợ cho hệ thống lệnh thay thế hiện đại, giao dịch hợp tác, cây trình duyệt chéo xác định hoặc ngăn xếp hoàn tác tùy chỉnh. Nó cũng không suy ra hành vi của các phím tắt vì nguồn xác định các hành động trên thanh công cụ chứ không phải sổ đăng ký phím tắt. Các tính năng không được hỗ trợ vẫn còn thiếu sót thay vì các khả năng ngụ ý.
Bảo mật tách biệt với việc lựa chọn lệnh. Các bộ lọc trong danh sách cho phép đã phát ra đánh dấu và bản xem trước được đóng hộp cát mà không có tập lệnh, nhưng trình khử trùng từ chối rõ ràng việc sử dụng làm bộ lọc XSS đầu vào thù địch chung. Máy chủ chấp nhận nội dung xuất bản không đáng tin cậy vẫn cần có trình dọn dẹp phân tích cú pháp HTML5 phía máy chủ thích hợp và chính sách dành riêng cho đích đến.
Bài học rút ra: sở hữu DOM chứ không phải lệnh — tóm tắt đường dẫn di chuyển và cách đánh dấu kết quả là những gì bạn kiểm tra trong công cụ WYSIWYG-to-HTML
Sở hữu kết quả bạn có thể kiểm tra. Trong trình chỉnh sửa này, một lệnh sẽ yêu cầu trình duyệt thay đổi một cây có thể chỉnh sửa nội dung, sau đó danh sách cho phép sẽ ghi lại thứ tự tuần tự của cây đó thành tập hợp con được hỗ trợ. Chế độ nguồn hiển thị quá trình chuyển giao và cung cấp bề mặt sửa chữa thực tế khi hành vi chỉnh sửa của trình duyệt không thuận tiện hoặc không nhất quán.
Sử dụng mẫu dùng một lần trong cùng trình duyệt với tác phẩm thực sự của bạn. Chỉ thực hiện các lệnh được gửi, kiểm tra các liên kết và lồng nhau, kiểm tra hoàn tác trước khi dựa vào nó và chỉ sao chép HTML đã lọc sau khi đọc nó. Quy trình công việc đó tôn trọng việc ngừng sử dụng mà không giả vờ ToolAcre đã thay thế chỉnh sửa cơ bản API.