Công cụ dành cho nhà phát triển · HTML WYSIWYG trình chỉnh sửa
Enter vs Shift+Enter: Cách người chỉnh sửa chọn giữa <p>, <div> và <br>
· Cách thức hoạt động
html contenteditable text-editing
Giải thích mô hình đoạn văn đằng sau trình chỉnh sửa trình duyệt: tại sao Enter có thể tạo <p> hoặc <div>, tại sao Shift+Enter chèn <br> và điều đó quyết định khoảng cách của bạn như thế nào.
Tại sao khoảng cách sai trong CMS nhưng vẫn ổn trong trình chỉnh sửa — mở đầu bằng vấn đề về khoảng cách kép hoặc không có khoảng cách cổ điển
Khoảng cách có vẻ thoải mái trong trình chỉnh sửa có thể thay đổi khi đoạn đi vào CMS vì các khối nhận được lề từ biểu định kiểu đích. Hai đoạn văn và hai dòng cách nhau bởi br có cấu trúc khác nhau ngay cả khi một lần xem trước khiến chúng có khoảng cách dọc tương tự nhau.
ToolAcre cho thấy sự khác biệt về nguồn. Nó không mang các lề hoặc kiểu nội tuyến đã sao chép, do đó khoảng cách đoạn xuất phát từ trình bao bọc xem trước hoặc đích sau này CSS. Người viết nên chọn cấu trúc theo ý nghĩa và xác minh các phần tử được xê-ri hóa thay vì thêm các lần nhấn phím trống cho đến khi một chế độ xem tạm thời trông ổn.
Ngắt khối so với ngắt nội tuyến — giải thích rằng <p> và <div> là các khối có lề riêng, trong khi <br> là ngắt dòng bên trong khối
Đoạn và div là các khối chứa; br là phần tử ngắt dòng void bên trong một luồng khác. Trình soạn thảo này cho phép p và br nhưng không cho phép div. Một div đã dán sẽ được mở ra, bảo toàn các từ của nó và cho phép con cháu trong khi loại bỏ phần bao bọc. br đã được vệ sinh được phát ra dưới dạng `<br />`.
Địa chỉ bưu điện có thể là một đoạn văn có chủ ý ngắt dòng vì các dòng của nó tạo thành một đơn vị. Hai suy nghĩ độc lập được thể hiện tốt hơn dưới dạng hai đoạn văn. Đích có thể định kiểu lề p một cách nhất quán, trong khi các phần tử br lặp lại được sử dụng làm dấu cách dọc sẽ mã hóa giao diện trực tiếp vào nội dung.
Những gì Enter thực hiện ở đây phụ thuộc vào trình duyệt và không được định cấu hình bởi ToolAcre
ToolAcre không đặt lệnh phân tách đoạn mặc định hoặc chặn Enter. Trình duyệt có thể chỉnh sửa được nội dung sẽ xử lý khóa và trình nghe đầu vào sẽ làm mới đầu ra sau đó. Các giới hạn của kho lưu trữ cảnh báo rằng hoạt động của công cụ sẽ khác nhau, do đó, việc khẳng định rằng Enter luôn tạo p, luôn tạo div hoặc tuân theo một quy tắc dành riêng cho phiên bản sẽ là hướng dẫn về khả năng tương thích được phát minh.
Sau đó, bước dọn dẹp sẽ thu hẹp bất kỳ quá trình xê-ri hóa nào được thực hiện. Một div do trình duyệt tạo không thể tồn tại dưới dạng div, mặc dù văn bản của nó có thể vẫn còn. Điều này có thể làm cho nguồn cuối cùng khác với cây trung gian trực tiếp. Do đó, chế độ nguồn là nơi thiết lập các phần tử p rõ ràng khi ý nghĩa đoạn ổn định có vấn đề.
Dấu ngắt mềm có thể được viết trong nguồn, nhưng không có hợp đồng Shift+Enter nào được triển khai
Thanh công cụ không có nút “ngắt mềm” và mã không đăng ký Shift+Enter. Một trình duyệt có thể triển khai cử chỉ đó nhưng bài viết này không hứa hẹn kết quả đầu ra của nó. Chế độ nguồn có thể giữ lại một br được phép, cung cấp một cách xác định để thể hiện dấu ngắt trong đoạn văn sau khi kiểm tra kết quả trực quan.
Hoạt động của bàn phím cũng phụ thuộc vào trạng thái lựa chọn và chỉnh sửa mà mô-đun không kiểm tra. Sử dụng chính xác trình duyệt liên quan đến công việc của bạn, sau đó đọc nguồn. Nếu cử chỉ tạo ra khối không mong muốn, hãy viết lại đoạn đó một cách rõ ràng thay vì dựa vào mô tả phím tắt được sao chép từ khung soạn thảo khác.
Ví dụ hoạt động: tạo địa chỉ và ghi chú, sau đó kiểm tra thay vì dự đoán
Đối với một địa chỉ, hãy sử dụng chế độ nguồn để tạo một p với br giữa người nhận, đường phố và địa phương. Để có một ghi chú ngắn, hãy tạo hai phần tử p. Quay lại chế độ trực quan, trong đó nguồn được làm sạch trước khi chèn và so sánh bản xem trước mà không cho rằng lề của nó khớp với trang web cuối cùng.
Sau đó sao chép HTML và kiểm tra đoạn riêng biệt với Tải xuống HTML. Kết quả được sao chép có chứa phần đánh dấu nội dung đã được làm sạch; nội dung tải xuống chứa tài liệu hoàn chỉnh có bản xem trước của ToolAcre CSS. Sự khác biệt này có thể giải thích tại sao việc mở tệp đã tải xuống trông hoàn chỉnh hơn việc dán đoạn đã sao chép vào một hệ thống có các kiểu khác nhau.
Các đoạn văn trống và khoảng trắng không bị ngắt chỉ được giữ lại khi được người viết lại hỗ trợ
Một đoạn văn được phép trống có thể vẫn còn vì p được chấp nhận và không có quy tắc nào xóa các khối trống. Một thực thể không phá vỡ khoảng trắng đã biết có thể trở thành ký tự được giải mã của nó và sau đó được thoát theo cách triển khai thực thể cục bộ; mã này không cung cấp quy tắc dọn dẹp nhắm mục tiêu cụ thể đến các đoạn đệm.
Do đó, “Vệ sinh ngay bây giờ” không phải là trình dọn dẹp bố cục. Nó loại bỏ các thuộc tính và đánh dấu không được hỗ trợ, cân bằng thẻ và nguồn định dạng, nhưng nó có thể giữ lại khoảng trống được phép về mặt cấu trúc. Xóa các tạo phẩm giãn cách một cách có chủ ý ở chế độ nguồn hoặc chế độ trực quan và để đích CSS cung cấp lề bình thường thay vì tích lũy các khối trống.
Điều này không bao gồm những gì - CSS quy tắc thu gọn lề hoặc cấu hình khung soạn thảo
Bài viết này không đề cập đến việc thu gọn lề, cấu hình dấu tách khung, ma trận bàn phím theo từng trình duyệt hoặc các vấn đề về khoảng cách giữa các email. Họ cũng không khẳng định rằng bản xem trước sẽ tạo ra CMS. Hộp cát nhẹ sử dụng phông chữ nội dung, chiều cao dòng, phần đệm và ngắt dòng riêng.
Nó cũng không coi đầu ra được lọc là ấn phẩm an toàn toàn cầu. Một nội dung gửi độc hại cần được dọn dẹp phía máy chủ phù hợp với đích đến, ngay cả khi bản xem trước cục bộ dùng một lần vẫn không hoạt động. Ngữ nghĩa đoạn văn, hành vi chỉnh sửa trình duyệt và chính sách bảo mật là ba mối quan tâm riêng biệt không nên gộp thành một bài kiểm tra “có vẻ đúng”.
Bài học rút ra: chọn dấu ngắt phù hợp với ý nghĩa — tóm tắt mô hình và cách trình soạn thảo HTML WYSIWYG của ToolAcre cho phép bạn kiểm tra phần tử nào mà mỗi khóa tạo ra
Chọn dấu ngắt phù hợp với nội dung nhưng hãy xác minh thay vì dự đoán thao tác nhấn phím. ToolAcre cấp quyền truy cập nguồn trực tiếp, chấp nhận p và br, mở div và hiển thị kết xuất hộp cát. Những thông tin thực tế đó hỗ trợ một quy trình làm việc có thể lặp lại mà không cần đưa ra lời hứa nào về Enter hoặc Shift+Enter.
Xây dựng một địa chỉ và ghi chú nhỏ, chuyển đổi chế độ hai lần và đảm bảo cấu trúc dự định tồn tại trong quá trình vệ sinh. Nếu một đích đến áp dụng các khoảng trống đáng ngạc nhiên, hãy kiểm tra CSS của nó thay vì chèn thêm HTML trống. Ý nghĩa ổn định lan truyền tốt hơn so với khoảng cách được điều chỉnh thành một bản xem trước riêng biệt.