Làm thế nào để biến contentEditable thành một trình soạn thảo đánh dấu có cấu trúc?

Question

Có LyX và các trình soạn thảo như vậy cố gắng đảm bảo bạn viết văn bản có cấu trúc riêng biệt. Tôi muốn hành vi tương tự từ một lĩnh vực html5 contentEditable ngoại trừ tôi không biết làm thế nào.

yêu cầu của tôi:

• Không DIV -tags được tạo ra.
• Văn bản không được phép bên ngoài vùng chứa văn bản. (đoạn văn, tiêu đề, tiền tố và nội tuyến)

Tôi cũng cần tìm hiểu cách duyệt nội dung và đẩy nó vào máy chủ ở dạng bị hạn chế đó.

(Tôi cũng sẽ yêu một tài liệu tốt về những điều tôi có thể làm cho một -field contenteditable)

Answer 1

Dưới đây là đặc tả DOM cho những gì nó có nghĩa là một yếu tố để có thể chỉnh sửa: http://www.w3.org/TR/html5/editing.html#editable

Nó âm thanh như chỉ làm cho tất cả các thẻ đoạn hiện tại và thẻ tiêu đề có thể chỉnh sửa sẽ cung cấp cho bạn những gì bạn muốn, nếu tôi hiểu những gì bạn đang yêu cầu. Nếu bạn muốn người dùng có thể chèn đoạn văn và tiêu đề mới, phím Enter trong khi chỉnh sửa sẽ chèn ngắt dòng dưới dạng <br> thẻ trong Chrome, nhưng nếu người dùng nhập vào thẻ HTML, họ sẽ bị thoát và chỉ hiển thị dưới dạng văn bản. Đối với việc chèn nội dung được định dạng khác, điều đó hoàn toàn phụ thuộc vào tác nhân người dùng; các thử nghiệm của tôi trong Chrome cho thấy rằng nó dường như không cho phép người dùng chèn đậm/nghiêng/etc. bản văn.

EDIT: có vẻ như trong Chrome (và có lẽ do tiện ích mở rộng, Safari), nhấn Control-I, Control-B, Control-U gây ra cùng một hành vi mà bạn có thể mong đợi từ trình chỉnh sửa văn bản phong phú!

Tôi cũng đã thử nghiệm trong Firefox và thấy rằng, không giống như Chrome và không hoàn toàn trái với thông số kỹ thuật, nó thực tế chèn các thẻ <p> mới thay vì <br> 's, với thuộc tính _moz_dirty="" được thêm vào. Bạn không cần phải loại bỏ điều này; nếu Firefox tuân thủ thông số kỹ thuật, nó sẽ không bao giờ phá vỡ DOM bằng cách chèn văn bản bên ngoài thẻ theo cách đó. Tuy nhiên, lưu ý rằng người dùng sử dụng Chrome và Firefox sẽ tạo ra các cấu trúc HTML khác nhau, mà bạn có thể muốn làm mượt hơn bằng Javascript hoặc vệ sinh phía máy chủ ... Tôi cũng không có sẵn IE trên máy này để tìm hiểu cách xử lý dòng mới, không may, và tài liệu của Microsoft không chỉ rõ.

Để đẩy nó vào máy chủ, bạn có thể làm điều đó bằng AJAX bằng cách kéo nội dung văn bản của các phần tử được đề cập (hoặc chỉ làm cho toàn bộ <div> có thể chỉnh sửa được), xây dựng một mảng nội dung văn bản của chúng. đến máy chủ. Điều này là khá dễ dàng để làm với jQuery (giúp đỡ thêm với điều này có thể được cung cấp cho điều này theo yêu cầu).