Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Điều gì xảy ra khi bạn dán từ Word hoặc Google Docs vào Trình chỉnh sửa web
· Cách thức hoạt động
html contenteditable text-cleanup
Giải thích những gì dán văn bản đa dạng thức mang theo, từ mso-style đến các phần tử trình bao bọc và ngăn xếp phông chữ, đồng thời cho biết cách đọc đánh dấu kết quả trước khi nó đến trang web của bạn.
Nó trông ổn trong Word — mở đầu bằng một bài viết được dán có khoảng cách và phông chữ không phù hợp với thiết kế trang web
Một đoạn văn được sao chép từ trình xử lý văn bản có thể trông bóng bẩy ở nguồn và có phông chữ, khoảng cách và trình bao xung đột với một trang web. ToolAcre không lưu giữ toàn bộ bản trình bày đó. Trình nghe dán của nó chặn hoạt động trước khi chèn đánh dấu phong phú ban đầu và thay vào đó chọn một biểu diễn được lọc.
Bằng chứng quan trọng là chế độ xem nguồn chứ không phải ấn tượng trực quan đầu tiên có giống với tài liệu gốc hay không. Trình soạn thảo cố tình thu hẹp: các tiêu đề, đoạn văn, điểm nhấn, danh sách, trích dẫn, các phần tử và liên kết giống mã có thể tồn tại, trong khi các thùng chứa bố cục, tên lớp, id và thuộc tính kiểu nội tuyến không thuộc về hợp đồng đầu ra của nó.
Bảng nhớ tạm không chỉ chứa văn bản — giải thích rằng bản sao văn bản đa dạng thức bao gồm loại HTML cùng với văn bản thuần túy
Bảng nhớ tạm có thể hiển thị `text/html` và `text/plain` cho một thao tác sao chép. Người xử lý yêu cầu cả hai. Khi tồn tại một tải trọng HTML, nó sẽ dọn dẹp chuỗi đó và chèn đoạn được viết lại bằng `insertHTML`; chỉ khi không có HTML phong phú thì nó mới chèn tải trọng đơn giản bằng `insertText`.
Ưu tiên đó đã được chứng minh bằng mã cho bảng điều khiển này chứ không phải là một tuyên bố chung về mọi ứng dụng. Nó giải thích tại sao một lớp dán phong phú có thể giữ được một danh sách trong khi làm mất đi vẻ ngoài của nó. Ứng dụng nguồn đã ghi bảng tạm HTML, nhưng danh sách cho phép của ToolAcre quyết định phần nào được phép vào bề mặt có thể chỉnh sửa.
Những gì trình soạn thảo này xóa khỏi dán phong phú: các thành phần, thuộc tính và nhận xét không được hỗ trợ
Các phần tử không được hỗ trợ được xử lý theo hai cách. Các trình bao bọc thông thường không xác định sẽ được mở ra để các từ của chúng vẫn được giữ nguyên, trong khi tập lệnh, kiểu, iframe, biểu mẫu, SVG, MathML và các vùng chứa rủi ro hoặc không phải trình soạn thảo khác sẽ bị xóa cùng với nội dung của chúng. Các nhận xét và loại tài liệu cũng bị loại bỏ thay vì đưa vào bản dự thảo.
Các thuộc tính phải đối mặt với một cổng thứ hai. Lớp, id, kiểu, thuộc tính dữ liệu và mọi trình xử lý sự kiện đều bị xóa vì các thuộc tính được phép được đặt tên cho mỗi phần tử. Điều này có nghĩa là tên lớp dành riêng cho nguồn và bản trình bày nội tuyến không thể chống lại biểu định kiểu đích sau khi ToolAcre đã lọc phần dán, mặc dù kiểu dáng nguồn hữu ích cũng có thể biến mất.
Tại sao trình bao bọc và kiểu dành riêng cho nguồn không tồn tại trong danh sách cho phép
Kho lưu trữ không cung cấp các bản cố định Word hoặc Google Docs đã được ghi lại, vì vậy bài viết này không phát minh ra các lớp `mso-` chính xác, id nội bộ hoặc trình tự trình bao bọc cho các bản phát hành cụ thể. Nó có thể nêu rõ hậu quả được chứng minh bằng danh sách cho phép: các lớp và kiểu sẽ bị xóa bất kể ứng dụng nguồn nào cung cấp chúng.
Quy tắc bất khả tri về nguồn đó là hướng dẫn biên tập mạnh mẽ hơn một danh mục dễ hiểu. Kiểm tra thông báo xóa sau khi dán. Nó ghi lại các lý do duy nhất như trình bao bọc không được hỗ trợ, thuộc tính bị cấm hoặc URL bị từ chối. Báo cáo cho bạn biết quá trình triển khai này đã loại bỏ những gì mà không giả vờ xác định ứng dụng đã tạo ra mọi phân đoạn ban đầu.
Ví dụ hoạt động: dán ba đoạn văn và đọc đánh dấu đã lọc
Sao chép ba đoạn văn ngắn, in đậm câu giữa và câu cuối cùng thành một danh sách. Sau khi dán, chuyển sang chế độ nguồn. Các phần tử đoạn văn, mạnh, ul và li nằm trong danh sách cho phép, trong khi các div xung quanh không được bao bọc và thuộc tính kiểu biến mất. Các thẻ b và i kế thừa chuẩn hóa thành mạnh và em.
Bây giờ hãy thêm thuộc tính sự kiện không an toàn vào mẫu nguồn dùng một lần và quay lại chế độ trực quan. Thuộc tính bị xóa trước khi nguồn đó trở thành DOM. Điều này thể hiện ranh giới chỉnh sửa, không an toàn khi xuất bản các bài gửi thù địch. Dự án cảnh báo rõ ràng về sự khác biệt của trình phân tích cú pháp và yêu cầu trình khử trùng phía máy chủ phù hợp đối với nội dung không đáng tin cậy.
Dán văn bản thuần túy chỉ được sử dụng khi bảng nhớ tạm không cung cấp thuộc tính HTML
Tính năng chèn văn bản thuần túy là lệnh dự phòng chứ không phải lệnh "dán mà không định dạng" do người dùng chọn trên thanh công cụ này. Nếu bảng tạm cung cấp HTML, ToolAcre sẽ lấy nhánh đó. Phím tắt của trình duyệt hoặc hệ điều hành có thể hiển thị một bản dán đơn giản nhưng kho lưu trữ không xác định hoặc hứa hẹn hành vi phím tắt cụ thể.
Khi chỉ có văn bản, `insertText` sẽ yêu cầu trình duyệt đặt các ký tự đó vào dấu mũ. Bất kỳ cấu trúc đoạn văn nào được tạo sau đó vẫn tuân theo hành vi chỉnh sửa của trình duyệt. Sử dụng chế độ xem nguồn để thêm các tiêu đề hoặc danh sách có chủ ý thay vì cho rằng ngắt dòng từ một ứng dụng khác sẽ tự động trở thành cấu trúc mà CMS của bạn mong đợi.
Điều này không bao gồm những gì - quy tắc dọn dẹp tự động, bộ lọc dán dành riêng cho CMS hoặc duy trì các thay đổi được theo dõi
Quy trình công việc này không lưu giữ các thay đổi, nhận xét, bố cục trang, phông chữ, màu sắc, bảng hoặc hình ảnh được theo dõi. Hình ảnh bị cố tình vắng mặt vì hình ảnh được phép tạo ra yêu cầu gửi đi và bề mặt xử lý lỗi. Trình chỉnh sửa cũng không có cấu hình dọn dẹp hoặc chuyển đổi nguồn cụ thể hứa hẹn tính trung thực cho một bộ ứng dụng văn phòng.
Dán cục bộ không chứng minh đích cuối cùng sẽ chấp nhận cùng một tập hợp con. CMS có thể loại bỏ nhiều thẻ hơn, viết lại liên kết hoặc thực thi chính sách của riêng mình. So sánh kết quả của trình soạn thảo với tài liệu đích và giữ bản gốc khi mất định dạng không được hỗ trợ sẽ xóa thông tin thay vì chỉ trình bày.
Bài học rút ra: hãy xem xét trước khi xuất bản — tóm tắt thói quen kiểm tra và cách trình soạn thảo HTML WYSIWYG của ToolAcre cho phép bạn dán cục bộ và xem đánh dấu trước khi nó đi đến bất kỳ đâu
Xem xét trước khi xuất bản: dán đoạn đại diện, không nhạy cảm, đọc cảnh báo xóa, kiểm tra nguồn và xem trước kết quả đã lọc. ToolAcre đưa ra một danh sách cho phép rõ ràng thay vì âm thầm đưa bản trình bày nước ngoài vào trang web của bạn. Điều đó giúp hiển thị quá trình dọn dẹp nhưng không chứng nhận HTML tùy ý là an toàn.
Nếu cấu trúc thiết yếu biến mất, hãy xây dựng lại nó với các tiêu đề, đoạn văn, danh sách, điểm nhấn và liên kết được hỗ trợ. Nếu mục tiêu chấp nhận ít hơn, hãy đơn giản hóa hơn nữa ở đó. Tạo tác chính xác không phải là sự mô phỏng trực quan gần nhất của tài liệu nguồn; nó được xem xét đánh dấu có ý nghĩa và chính sách đích đều được hiểu.