Trình chỉnh sửa văn bản trực tuyến hoạt động như thế nào?

Question

Tôi đang cố gắng để phát triển một trình soạn thảo trực tuyến (như FCKEditor/etc) nhưng tôi không có ý tưởng làm thế nào họ làm việc. Tôi biết rằng những người WYSIWYG có Javascript và IFrame, nhưng làm thế nào để họ thực sự làm việc?

Tôi đặc biệt tò mò về việc có bản xem trước thời gian thực về những gì đang được nhập vào trình chỉnh sửa.

Answer 1

RTE thường (luôn luôn?) được triển khai bằng iframe. Đối tượng tài liệu có sẵn bên trong iframe đó phải có thuộc tính designMode set to on. Sau thời điểm này, tất cả những gì bạn phải làm để thực hiện các chức năng cơ bản như in đậm, in nghiêng, tô màu, nền, vv được thực hiện bằng phương thức execCommand của đối tượng tài liệu.

Lý do chính để sử dụng khung nội tuyến là bạn sẽ không mất tiêu điểm của lựa chọn khi nhấp vào nút tạo kiểu (Firefox chỉ cho phép đặt thuộc tính này trên iframe). Hơn nữa, thuộc tính contentEditable không có sẵn trong các phiên bản Firefox trước đó đến 3.

Mọi thứ trở nên phức tạp hơn một chút khi bạn muốn làm những điều kỳ lạ với RTE đó. Tại thời điểm đó, bạn phải sử dụng Range objects (được triển khai khác nhau trong các trình duyệt khác nhau).

Answer 2

(ví dụ:. Ah, có một đầu vào văn bản biên giới-ít hơn, mà đồng bộ với phần thực sự hiển thị Vì vậy, để đưa bức thư màu đỏ họ chỉ cần thay đổi phong cách) và vv ..

đó là cách thực hiện.

Answer 3

là mã nguồn mở và mã nguồn có sẵn miễn phí.

Mã cho the editor sử dụng trên Stackoverflow is also available

Nó có thể là giá trị chi tiêu một số thời gian đọc qua mã nguồn. Mọi người ở đây sẽ vui lòng giúp giải thích bất kỳ bit nào của mã không rõ ràng.

Answer 4

Tôi tin rằng chìa khóa để biên tập viên WYSIWYG là thuộc tính contenteditable (có thể áp dụng cho bất kỳ thẻ HTML nào, nhưng có lẽ là một cái gì đó giống như div trong trường hợp này). Phần còn lại của chức năng thường được Javascript cung cấp khi truy cập DOM và thao tác HTML. Liên quan đến tính năng xem trước, đây có lẽ chỉ là vấn đề hooking sự kiện được nâng lên khi phần tử được chỉnh sửa bởi người dùng và sau đó tìm nạp HTML của nó và hiển thị nó ở nơi khác trên trang bằng cách sử dụng Javascript tương đối đơn giản.

Answer 5

Cập nhật:Nếu bạn chỉ cần biên tập viên, tôi khuyên bạn nên sử dụng bất kỳ đề xuất nào khác mà mọi người ở đây đã đưa ra. Nhưng nếu bạn có một số mục đích học tập để xây dựng này, sau đây sẽ là một bàn đạp.

---

Điều này được thực hiện khá dễ dàng (một số phần). Ví dụ, bạn có thể sử dụng jQuery để bắt đầu và chạy thật nhanh.

div.theScreen { 
    width:320px; 
    height:75px; 
    border:1px solid #CCCCCC; 
    background-color:#f1f1f1; 
} 

<div class="theScreen"></div> 
<div><textarea class="typePad"></textarea></div> 

Bây giờ chúng tôi đã đánh dấu và tạo kiểu, chúng tôi có thể thêm một số Javascript đơn giản để kích hoạt xem trước thời gian thực.

$(document).ready(function(){ 
    $(".typePad").keyup(function(){ 
    $(".theScreen").html($(".typePad").val()); 
    }); 
}); 

Đây là ví dụ rất thô sơ và đơn giản, nhưng nó sẽ giúp bạn bắt đầu.

Answer 6

Tôi đã bắt đầu dự án "sourceforge" nguồn mở để tạo trình chỉnh sửa văn bản phong phú khoảng một năm rưỡi trước. Tôi không bao giờ tìm ra cách để có được mã của tôi trên đó, tuy nhiên để phát triển nó, tôi đã phải nghiên cứu như thế nào "nội dung có thể chỉnh sửa chế độ" hoạt động trong IE và Firefox. Nghiên cứu của tôi bao gồm chủ yếu là trang web firefox và trang web microsoft.

Mã mà tôi thấy để làm điều này là xấu xí và không thân thiện với OO (xin lỗi tôi là một đối tượng không thể giúp được) vì vậy phải mất rất nhiều tiền để có được một biểu mẫu Tôi có thể phát triển và mở rộng.

Thật không may, ngay cả khi bạn thực hiện theo chức năng được cung cấp bởi "chế độ có thể chỉnh sửa nội dung" của trình duyệt, bạn vẫn sẽ kết thúc với trình chỉnh sửa có đầy đủ các lỗi.Lý do cho điều đó là "chế độ có thể chỉnh sửa nội dung" không hoạt động nhất quán với dán từ MS Word (mọi người đều cố gắng này) hoặc tạo danh sách được đánh số và đánh dấu nó tạo ra sẽ không nhất quán và kém hình thành.

Đây là lý do tôi hiện sử dụng TinyMCE. TinyMCE có đầy đủ các quyết định thiết kế mà cá nhân tôi có thể tránh được, nhưng họ đã sửa phần lớn các lỗi mà bạn sẽ nhận được khi cố gắng tạo trình soạn thảo của riêng bạn. Nó cũng có đầy đủ các tính năng mà sẽ cho phép bạn tùy chỉnh nó theo nhu cầu của bạn.

Tôi không thể đề xuất bất kỳ điều gì khác vì tôi chưa thực sự thử các lựa chọn thay thế.

Trong khi TinyMCE có vẻ là lựa chọn tốt nhất, vẫn còn đau đầu với tôi vì việc dán tài liệu Word vẫn không thể đoán trước được, lời hứa WYSIWYG không thực sự khả thi trong HTML nhưng khách hàng mong đợi nó và có nhiều vấn đề một khi bạn bắt đầu cho phép người dùng đặt HTML thô vào cơ sở dữ liệu của bạn. (đặc biệt khi cơ sở mã của bạn có các phần được cập nhật lần cuối vào năm 1993 ...)