WangEditor5 (Bảng soạn thảo)

WangEditor5 Editor, miễn phí nguồn mở (dựa trên MIT Open Source Agreement), tác giả gốc:https: // www.wangeditor.com/, hỗ trợ phát triển thứ hai, mọi người có thể yên tâm sử dụng!

Tác giả ban đầu cũng đang cập nhật trình soạn thảo wangEditor5, vì vậy chúng tôi cũng có thể nâng cấp plugin của chúng tôi khi tác giả ban đầu cập nhật.

Nhờ có tài liệu phát triển đầy đủ cho wangEditor5, chúng tôi có thể làm cho nó thành một plugin cho Z-blog PHP.

Từ trước đến nay, chúng tôi luôn muốn tìm một cái gì đó tương tự nhưTài khoản công cộng WeChatMột trình soạn thảo văn bản phong phú hiện đại dễ sử dụng như vậy, và bây giờ anh ấy đang ở đây!

Lưu ý: Bạn không thể sử dụng nó cùng với các plugin soạn thảo khác, hãy tắt các plugin soạn thảo khác trước khi sử dụng plugin này (ví dụ: trình soạn thảo UEditor của Z-blog PHP)!

WangEditor5 Editor mặc định không hỗ trợ sử dụng trên điện thoại di động, trong thực tế, bất kể bất kỳ plugin biên tập, trải nghiệm người dùng trên điện thoại di động là rất kém, do đó, WangEditor5 Editor chính thức chỉ đơn giản là cắt bỏ tính năng này.

Tất nhiên chức năng này cũng có thể được mở ra, chỉ cần tùy chỉnh thanh công cụ hiển thị trên điện thoại di động, mới có thể nâng cao trải nghiệm sử dụng của người dùng Không, người dùng có nhu cầu có thể tìm chúng tôi tùy chỉnh!

Dưới đây là giới thiệu về trang web của WangEditor

# Lợi thế

# Các vấn đề của các editor văn bản phong phú khác

Tìm kiếm trên mạng "Web rich text editor" bạn sẽ nhận được nhiều kết quả, chẳng hạn như UEditor kindEditor trong nước, CKEditor TinyMCE Quill ProseMirror Draft Slate ở nước ngoài, v.v. Có rất nhiều người sử dụng các trình soạn thảo này, hoặc để làm phát triển thứ hai.

Tuy nhiên, tất cả đều có một số vấn đề dưới đây (đánh gõ bảng đen ~), điều này có thể ảnh hưởng đáng kể đến hiệu quả phát triển, chi phí phát triển và sự ổn định của sản phẩm của bạn.

# Công nghệ cũ

Ví dụ như UEditor KindEditor, bạn vẫn sử dụng API document.execCommand.Điều này sẽ ảnh hưởng đáng kể đến sự ổn định và khả năng mở rộng của sản phẩm.

Đến lúc đó "Xu" cũng không thể thực hiện được, nơi nào cũng có vấn đề, sẽ bị PM khinh miệt: "Người ta xxx làm sao có thể được?"

Trung Quốc không thân thiện

Ví dụ như CKEditor TinyMCE Quill ProseMirror, không có tài liệu chính thức bằng tiếng Trung.Điều này sẽ ảnh hưởng rất lớn đến hiệu quả phát triển của bạn (trên giờ tối nay ~)

PS: Tiếng Anh, xin vui lòng bỏ qua.

Cần phát triển nhiều thứ hai

Ví dụ như ProseMirror Draft Slate, mặc dù chúng cũng là một trình soạn thảo văn bản phong phú, nhưng chúng chỉ là một lõi hoặc bộ điều khiển, không phải là một tính năng đầy đủ.

Một lượng lớn phát triển thứ cấp, không chỉ sẽ dẫn đến chi phí R & D tăng lên đáng kể (ngày này đóng cửa ~), còn có thể bởi vì thử nghiệm không hoàn hảo mà xuất hiện vô tận lỗi, rơi vào bùn lầy.

PS: Trừ khi bạn có nhu cầu phát triển tùy chỉnh mạnh mẽ.

# có giới hạn trong khung

Slate và Draft đều dựa vào React Framework. Nếu bạn muốn sử dụng nó trong Vue, khối lượng công việc và khó khăn là rất lớn.

# Không có thành phần chính thức như React Vue

Một số không phụ thuộc vào khung, như ProseMirror, nếu bạn đang sử dụng Vue React, bạn sẽ phải đóng gói các thành phần của mình.

Sản phẩm mới chưa ổn định

Các trình soạn thảo được liệt kê ở trên đều là các sản phẩm tương đối trưởng thành, số lượng người dùng tương đối lớn. Bạn cũng có thể tìm thấy các sản phẩm khác, chẳng hạn như những sản phẩm mới được phát triển và ít được sử dụng.
Dù sao đi nữa, hãy chọn một cách cẩn thận, bởi vì các hố của trình soạn thảo văn bản phong phú thực sự là quá nhiều, cần phải trải qua rất nhiều thử nghiệm, sử dụng trước khi từ từ ổn định.

Lựa chọn sản phẩm ổn định, có thể tham khảo

github stars

Số lượng tải xuống npm

Thời gian và tần suất phát hành npm

Số lượng kết quả liên quan của công cụ tìm kiếm

Có nhà máy lớn chứng thực không

Có thử nghiệm đơn vị / thử nghiệm e2e không

Ưu điểm của #wangEditor

Giá trị của một sản phẩm là giải quyết các vấn đề của người dùng, tăng hiệu quả, giảm chi phí, tăng tính ổn định và khả năng mở rộng.

WangEditor không phải là để làm mà làm, cũng không đơn thuần bắt chước ai, mà là sau khi phân tích các vấn đề trên, đưa ra một giải pháp hệ thống. Mục đích thực sự để giải quyết vấn đề của người dùng, sản xuất giá trị của riêng mình.

# Sử dụng công nghệ chính thống

WangEditor bắt đầu với phiên bản V5 với các bản cập nhật công nghệ lớn.

#1. Nâng cấp lên khả năng L1

API document.execCommand đã bị loại bỏ, sử dụng slate.jsopen trong cửa sổ mới (nhưng không phụ thuộc vào React) làm nhân và nâng cấp lên khả năng L1.

Đây cũng là giải pháp công nghệ hiện nay được sử dụng bởi các trình soạn thảo văn bản phong phú chính thức, chẳng hạn như Quill ProseMirror Draft nổi tiếng.

#2. Sử dụng vdom

Sử dụng công nghệ vdom (dựa trên vdom.jsopen trong cửa sổ mới) để cập nhật hình chiếu, tách model và view, tăng tính ổn định.

#3. khả năng mở rộng

Sử dụng các cơ chế mở rộng các plugin và mô-đun để đảm bảo khả năng mở rộng. Trong tương lai sẽ tiếp tục mở rộng thêm nhiều chức năng.

Trên thực tế, các chức năng được tích hợp trong wangEditor hiện nay đều được xây dựng bằng các hình thức mở rộng và module.

# Tài liệu Trung Quốc

WangEditor có tài liệu chi tiết bằng tiếng Trung và môi trường giao tiếp bằng tiếng Trung. Tác giả Open in New Window là một lập trình viên.

* Phản hồi và giao tiếp kịp thời

Bạn cũng có thể đăng vấn đề lên GitHub, nhóm sẽ nhận phản hồi hoặc chấp nhận kịp thời.

# Tích hợp tất cả các chức năng, không cần phát triển thứ hai

WangEditor tích hợp tất cả các chức năng thao tác văn bản phong phú thông thường và đáp ứng hầu hết các nhu cầu sử dụng. Cấu hình trực tiếp để sử dụng, không cần phát triển thứ hai.

// wangEditor đã tích hợp 50+ menu editor.getAllMenuKeys()[
  "bold","underline","italic","through","code","clearStyle","headerSelect","header1","header2","header3",
  "color","bgColor","insertLink","editLink","unLink","viewLink","insertImage","deleteImage","editImage",
  "viewImageLink","imageWidth30","imageWidth50","imageWidth100","blockquote","emotion","fontSize","fontFamily",
  "indent","delIndent","justifyLeft","justifyRight","justifyCenter","lineHeight","redo","undo","divider","codeBlock",
  "bulletedList","numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
  "deleteTableCol","tableHeader","tableFullWidth","insertVideo","deleteVideo","uploadImage","codeSelectLang"]

PS: Trong khi đó, wangEditor có API phong phú và đủ khả năng mở rộng cho phép bạn tùy chỉnh các menu phát triển, module, plugin, v.v.

Sử dụng dễ dàng với Vue React

WangEditor được phát triển dựa trên nhân slate, nhưng không phụ thuộc vào React, vì vậy bản thân nó không phụ thuộc vào khung.

Ngoài ra, chúng tôi đã chính thức đóng gói các thành phần Vue React để dễ dàng sử dụng với các framework như Vue React.
Các framework khác, chúng tôi sẽ tiếp tục hỗ trợ, mọi người cũng có thể gửi vấn đề.

Đẫm qua 5000 hố

WangEditor nguồn mở trong nhiều năm, rất nhiều người dùng sử dụng và phản hồi, đã giải quyết rất nhiều vấn đề open in new window. Trong quá trình thử nghiệm phiên bản V5, các vấn đề này cũng đã được thử nghiệm lặp lại để đảm bảo sự ổn định tối đa.

# Teamwork, liên tục lặp lại nâng cấp

WangEditor không còn là tác giả chiến đấu một mình, chúng tôi có một nhóm nhiều người, cùng nhau sửa lỗi, nâng cấp các tính năng, theo dõi các câu hỏi, trả lời các câu hỏi của cộng đồng.