Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Cách Trình chỉnh sửa WYSIWYG Chuyển định dạng thành HTML: Giải thích về nội dung có thể chỉnh sửa
· Cách thức hoạt động
html contenteditable developer-workflow
Giải thích thuộc tính có thể chỉnh sửa nội dung giúp mọi thành phần có thể chỉnh sửa được, cách trình duyệt biến đổi DOM khi bạn nhập và định dạng cũng như cách DOM trở thành HTML mà bạn sao chép ra.
Bạn nhấn đậm; <strong> đến từ đâu? - mở ra với khoảng cách giữa việc nhấp vào nút và xem đánh dấu
Nút thanh công cụ có nhãn Bold có cảm giác giống như một cây cọ vẽ, nhưng trình duyệt phải thể hiện kết quả trong cây tài liệu. Cụm từ đã chọn có thể trở thành phần tử <b> hoặc <strong> tùy thuộc vào lệnh và công cụ chỉnh sửa. Nhiệm vụ của nhà phát triển là biến những đột biến dành riêng cho trình duyệt đó thành HTML một trang khác có thể đọc mà không chấp nhận mọi thẻ hoặc thuộc tính nguy hiểm. Nội dung bạn nhìn thấy trên màn hình là DOM có thể chỉnh sửa, không phải tệp xử lý văn bản có lớp định dạng độc lập.
contenteditable: thuộc tính giúp trang có thể chỉnh sửa được - giải thích máy chủ chỉnh sửa, vị trí dấu mũ và cách trình duyệt sở hữu hành vi chỉnh sửa
contenteditable="true" biến một phần tử thành máy chủ chỉnh sửa. Trình duyệt quản lý việc di chuyển, lựa chọn, chèn và xóa dấu mũ bên trong nó, với cây DOM bên dưới. Bề mặt chỉnh sửa của ToolAcre sử dụng tính năng trình duyệt này và hiển thị cả chế độ trực quan và chế độ nguồn; nội dung vẫn ở trong trang thay vì được gửi đến máy chủ văn bản đa dạng thức. Sự kiện dán nhận được sự chú ý riêng vì HTML được dán có thể bao gồm các thành phần và thuộc tính không được phép nhập tài liệu đáng tin cậy đã được bỏ chọn.
Mỗi lần nhấn phím là một đột biến DOM — mô tả các nút văn bản đang phát triển, các phần tử được bao bọc và phân chia cũng như lý do cây thay đổi ngay cả khi văn bản trông không thay đổi
Gõ tạo hoặc mở rộng các nút văn bản; nhấn Enter có thể chia một khối; tô đậm một vùng chọn sẽ bao bọc một phạm vi. DOM chính xác sau hai lần nhấp chuột không được đảm bảo khớp với chuỗi <strong> tưởng tượng của nhà phát triển: trình duyệt chọn các phần tử khác nhau và lồng nhau. ToolAcre hiện sử dụng document.execCommand để định dạng. API đó không được dùng nữa nhưng không có thay thế thả xuống được triển khai thống nhất cho mọi thao tác chỉnh sửa ở đây, vì vậy trình chỉnh sửa coi đầu ra của nó là đầu vào không đáng tin cậy cần được chuẩn hóa thay vì dưới dạng đánh dấu chuẩn.
Từ chuỗi DOM trực tiếp đến HTML - giải thích việc tuần tự hóa cây đã chỉnh sửa thành đánh dấu mà bạn có thể sao chép
Để sao chép HTML, người chỉnh sửa sẽ đọc HTML bên trong của bề mặt chỉnh sửa và chuyển chuỗi kết quả qua danh sách cho phép phần tử/attribute. Các thẻ như b được chuẩn hóa thành ngữ nghĩa mạnh; các liên kết được phép được kiểm tra để tìm các lược đồ URL có thể chấp nhận được, trong khi các trình xử lý sự kiện và các thuộc tính không liên quan sẽ bị xóa. Chế độ nguồn cũng chuyển văn bản của nó qua cùng một bộ lọc trước khi đưa nó trở lại bề mặt trực quan. Đây là đường dẫn dọn dẹp dành riêng cho người chỉnh sửa, không phải là đường dẫn dọn dẹp HTML phía máy chủ có mục đích chung đối với nội dung thù địch từ người dùng tùy ý.
Ví dụ đã hoạt động: một ghi chú gồm hai đoạn có cụm từ in đậm — tuân theo DOM thông qua việc nhập, chọn và in đậm, sau đó hiển thị đánh dấu kết quả
Nhập hai đoạn văn— “Cập nhật dự án” và “Bản nháp sẵn sàng”—sau đó chọn “Bản nháp” trong đoạn thứ hai và nhấn Bold. Trình duyệt có thể chèn <b>Bản nháp</b> vào DOM trực tiếp. Việc chuyển sang chế độ nguồn sẽ chuyển nó qua bộ khử trùng của ToolAcre, bộ này có thể phát ra <strong>Draft</strong> bên trong đoạn của nó sau khi chuẩn hóa. Hãy thử tải trọng <img onerror="..."> đã dán trong tài liệu dùng một lần: danh sách cho phép đầu ra không bao gồm hình ảnh hoặc thuộc tính trình xử lý sự kiện. Ví dụ này minh họa lý do tại sao bạn kiểm tra đánh dấu kết quả thay vì giả sử nhấp chuột có một đại diện HTML phổ biến.
Tại sao các hành động giống nhau lại đưa ra đánh dấu khác nhau trong các trình duyệt khác nhau - bao gồm hành vi chỉnh sửa dành riêng cho trình duyệt và lý do người chỉnh sửa bình thường hóa đầu ra của họ
Các trình duyệt khác nhau triển khai các lệnh chỉnh sửa, ngắt dòng và ranh giới lựa chọn một cách khác nhau. Ngay cả các đoạn hiển thị giống hệt nhau cũng có thể được tuần tự hóa với các phần tử khối hoặc nhịp lồng nhau khác nhau. Bước chuẩn hóa làm giảm một số khác biệt nhưng không làm cho bề mặt WYSIWYG trở thành bộ tuần tự hóa được đảm bảo tiêu chuẩn. ToolAcre hiển thị nguồn cùng với kết quả trực quan, do đó bạn có thể sửa lỗi lồng nhau. Bản xem trước của nó chạy trong iframe có thuộc tính hộp cát không cho phép thực thi tập lệnh, hạn chế tác động của một đoạn không an toàn đến bản xem trước đó.
Điều này không bao gồm những gì - chỉnh sửa cộng tác, hoàn tác ngăn xếp và khung soạn thảo đầy đủ nằm ngoài phạm vi
Trang này không hứa hẹn chỉnh sửa cộng tác, lịch sử hoàn tác hoàn chỉnh, ứng dụng email khách bóng bẩy hoặc khung soạn thảo đầy đủ. Nội dung có thể chỉnh sửa không thể tự quyết định loại đánh dấu mà CMS bên thứ ba chấp nhận và danh sách cho phép dựa trên chuỗi không thể thay thế cho trình khử trùng phân tích cú pháp HTML5 phía máy chủ nơi người dùng không đáng tin cậy có thể gửi nội dung. Bản xem trước trong hộp cát là một biện pháp bảo vệ riêng biệt khỏi kết quả làm sạch; không làm cho JavaScript tùy ý hoặc URL thù địch trở nên an toàn ở mọi đích đến.
Bài học rút ra: trình chỉnh sửa là DOM bạn có thể thấy — tóm tắt cơ chế và cách trình chỉnh sửa HTML WYSIWYG của ToolAcre hiển thị đánh dấu mà định dạng của bạn tạo ra mà không cần rời khỏi trình duyệt
Trình chỉnh sửa là DOM bạn có thể xem và kiểm tra. Trình chỉnh sửa HTML WYSIWYG của ToolAcre cung cấp cho bạn một cách trực tiếp để so sánh tác vụ định dạng trực quan với HTML đã được lọc mà nó tạo ra, cục bộ trong trình duyệt của bạn. Nhập và in đậm một ghi chú dùng một lần, chuyển sang chế độ nguồn và chỉ giữ lại những thành phần mà đích đến của bạn thực sự hỗ trợ.