Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Tại sao 'Những gì bạn thấy' không bao giờ hoàn toàn là 'Những gì bạn nhận được' trong HTML
· Lý lịch
html css contenteditable
Giải thích lý do cấu trúc WYSIWYG chỉ có thể gần đúng kết quả cuối cùng trên web, vì HTML mô tả cấu trúc trong khi CSS, thiết bị và ứng dụng khách quyết định giao diện cũng như ý tưởng WYSIWYM phát triển từ cấu trúc đó.
Hoàn hảo trong trình soạn thảo, sai ở trang - mở đầu với sự không khớp quen thuộc
Thông báo có thể trông cân đối bên trong ToolAcre và đông đúc sau khi vào một trang web vì các thành phần giống nhau đáp ứng một biểu định kiểu khác nhau. Khung nội tuyến cục bộ là một tài liệu có phông chữ, chiều cao dòng, phần đệm và cách phối màu sáng riêng. Đây là chế độ xem kiểm tra, không phải ảnh chụp màn hình của mọi điểm đến.
WYSIWYG do đó có ý nghĩa giới hạn trên web. Trình chỉnh sửa có thể hiển thị chính xác ngữ cảnh hiển thị hiện tại nhưng “những gì bạn nhận được” sau này bao gồm máy chủ CSS, chiều rộng vùng chứa, cài đặt trình duyệt và các chuyển đổi nội dung không xuất hiện trong quá trình soạn thảo.
HTML mô tả cấu trúc, không phải hình thức - giải thích rằng cùng một đánh dấu hiển thị khác nhau dưới các biểu định kiểu khác nhau
HTML chủ yếu ghi lại cấu trúc và các mối quan hệ: tiêu đề, đoạn văn, danh sách, trích dẫn, nhấn mạnh, mã và liên kết. Giao diện xuất hiện khi mặc định của tác nhân người dùng và kiểu tác giả diễn giải các thành phần đó. ToolAcre xóa các thuộc tính lớp và kiểu nội tuyến, củng cố sự phân tách đó trong đoạn được sao chép của nó.
H2 tương tự có thể lớn trong một trang mặc định, nhỏ gọn trong thẻ ứng dụng và được thiết kế lại khi in. Vai trò của nó vẫn là một tiêu đề ngay cả khi các kích thước thay đổi. Tác giả nên đánh giá xem cấu trúc có đúng hay không trước khi quyết định liệu một bản xem trước có kiểu chữ mong muốn hay không.
Biểu định kiểu tác nhân người dùng và tầng — bao gồm các kiểu trình duyệt mặc định và cách trang web CSS ghi đè những gì bản xem trước của trình chỉnh sửa hiển thị
Trình duyệt bắt đầu bằng quy tắc tác nhân người dùng cho các thành phần, sau đó áp dụng kiểu trang và tùy chọn người dùng thông qua tầng. Tài liệu xem trước của ToolAcre thêm biểu định kiểu nhỏ của riêng nó. Nó không nhập mã thông báo thiết kế của trang web lưu trữ hoặc chủ đề CMS trong tương lai.
Khi đánh dấu được sao chép vào một trang khác, lề p, thụt lề danh sách, màu liên kết và tỷ lệ tiêu đề đều có thể thay đổi. Giải pháp là không đưa các kiểu xem trước tạm thời vào đoạn vì trình soạn thảo này vẫn loại bỏ chúng. Áp dụng bản trình bày đã được xem xét ở đích và thử nghiệm ở đó.
Thiết bị, chế độ tối và ứng dụng email - mô tả nhiều ngữ cảnh hiển thị mà một đoạn mã sẽ đáp ứng
Các thiết bị thay đổi chiều rộng có sẵn, số liệu phông chữ và thu phóng người dùng. Chủ đề ở chế độ tối có thể thay đổi màu sắc, trong khi ToolAcre cố tình ghim bản xem trước của nó vào tài liệu sáng. Ứng dụng email khách áp đặt một bộ ràng buộc HTML và CSS khác mà trang này không mô phỏng hay xác thực.
Không có nguồn kho lưu trữ nào cung cấp ma trận tương thích trình duyệt hoặc ứng dụng thư-ứng dụng khách, vì vậy bài viết này đặt tên cho các thứ nguyên một cách định tính thay vì hứa hẹn hành vi phổ biến. Yêu cầu phản hồi và email yêu cầu kiểm tra trong môi trường hỗ trợ thực tế. Một iframe được đóng hộp cát không thể đại diện cho bằng chứng đó.
WYSIWYM: điều bạn thấy chính là điều bạn muốn nói - giới thiệu triết lý chỉnh sửa cấu trúc được phổ biến bởi các công cụ như LyX
Tư duy chỉnh sửa cấu trúc hỏi nội dung có ý nghĩa gì hơn là liệu bề mặt soạn thảo có giống hệt điểm cuối hay không. Các cấp độ tiêu đề thể hiện thứ bậc, liệt kê thể hiện sự phân nhóm, mạnh mẽ thể hiện tầm quan trọng và liên kết thể hiện đích đến. CSS sau đó truyền đạt những ý nghĩa đó một cách trực quan phù hợp với ngữ cảnh.
Sổ làm việc gọi đây là WYSIWYM và đặt tên là LyX, nhưng không có nguồn lịch sử nào ở đây. Khái niệm này có thể được giải thích mà không cần chỉ định nguồn gốc hoặc hành vi của sản phẩm: trước tiên, mục đích ngữ nghĩa của tác giả, sau đó xem trước và điều chỉnh cách trình bày nơi nội dung sẽ thực sự tồn tại.
Ví dụ hoạt động: một đoạn mã trong ba ngữ cảnh - hiển thị cùng một đánh dấu trong biểu định kiểu mặc định, chủ đề trang web và bản xem trước email
Xây dựng một đoạn với h2, p, strong, ul và liên kết công khai. Mở tài liệu đã tải xuống để xem trình bao bọc ánh sáng của ToolAcre, dán đoạn đã sao chép vào trang kiểm tra theo chủ đề và đặt bản sao đã điều chỉnh vào bản xem trước email đã được phê duyệt. Giữ từ ngữ giống hệt nhau.
Ba chế độ xem có thể sẽ khác nhau vì phong cách và quy tắc ứng dụng khách của chúng khác nhau, trong khi cấu trúc nguồn vẫn có thể so sánh được. Nếu email yêu cầu bảng hoặc trình bày nội tuyến thì đó là bản dịch riêng; ToolAcre xóa cả bảng và kiểu thay vì giả vờ rằng bản xem trước trình duyệt của nó đã xác thực hộp thư đến.
Nội dung này không đề cập đến — CSS gỡ lỗi hoặc định cấu hình trình chỉnh sửa để tải kiểu trang web
Bài viết này không gỡ lỗi tính đặc hiệu của CSS, định cấu hình trình chỉnh sửa với kiểu trang web hoặc chứng nhận đánh dấu email. Nó cũng không khẳng định rằng kết quả sao chép là an toàn cho việc xuất bản tùy ý không đáng tin cậy. Trình khử trùng là một danh sách cho phép biên tập hẹp có rủi ro về sự khác biệt giữa trình phân tích cú pháp được ghi lại.
Hộp cát xem trước dừng các tập lệnh, biểu mẫu và quyền truy cập có cùng nguồn gốc bên trong ToolAcre. Đã sao chép HTML sẽ rời khỏi hộp cát đó. Sử dụng tính năng vệ sinh tại điểm đến, CSP khi thích hợp, các thử nghiệm đáp ứng và kiểm tra khả năng tiếp cận. Sự không phù hợp về mặt hình ảnh và tính bảo mật là những vấn đề riêng biệt ngay cả khi cả hai đều hiển thị rõ ràng sau khi xuất bản.
Bài học rút ra: chỉnh sửa ý nghĩa, xác minh đánh dấu — tóm tắt cách tiếp cận và cách trình soạn thảo HTML WYSIWYG của ToolAcre cho phép bạn tập trung vào đánh dấu mà bạn thực sự bàn giao
Chỉnh sửa ý nghĩa và xác minh đánh dấu trước khi theo đuổi sự tương đương về mặt hình ảnh. ToolAcre làm cho phân đoạn ngữ nghĩa và kết xuất cục bộ có sẵn cạnh nhau, giúp xác định xem sự không khớp đến từ cấu trúc hay từ cách trình bày đích.
Sau đó, di chuyển đoạn được xem xét vào bối cảnh đại diện và đo lường kết quả ở đó. Một quy trình làm việc tốt mong đợi sự khác biệt, ghi lại những điều chỉnh có chủ ý và tránh tuyên bố rằng một chế độ xem của người chỉnh sửa dự đoán mọi trình duyệt, thiết bị, chủ đề hoặc hộp thư đến.