10 Plugin WYSIWYG jQuery và HTML5 tốt nhất

Giới thiệu:

HTML5 WYSIWYG (Những gì bạn thấy là những gì bạn nhận được). Hiện nay có rất nhiều plugins tốt thật khó để tìm ra những cái tốt nhất. Trong bài này, tôi sẽ giới thiệu một số plugin jQuery và HTML5 WYSIWYG tốt nhất, giúp bạn tiết kiệm thời gian tìm kiếm các plugin phù hợp với nhu cầu của bạn.

Froala

Froala WYSIWYG HTML Editor dễ tích hợp và sử dụng. Nó đòi hỏi kiến thức mã hóa tối thiểu. Nó yêu cầu jQuery 1.11.0 trở lên và phông chữ mang tính biểu tượng có tên Font Awesome 4.4.0. Kết hợp với tất cả các tính năng UI và UX, nó cũng đi kèm với một cơ chế bảo vệ mạnh mẽ chống lại các cuộc tấn công XSS.

Điểm nổi bật

• 34 kb gzipped
• Chỉnh sửa nội tuyến
• Phím tắt có sẵn
• Yêu cầu kiến thức cơ bản về HTML và JavaScript
• Chủ đề tối và sáng (có thể được tùy chỉnh bằng cách chỉnh sửa tệp LESS)
• Được tối ưu hóa cho thiết bị di động
• Thân thiện với MS-Word
• 34 ngôn ngữ được hỗ trợ bao gồm hỗ trợ RTL (Phải sang trái)

ContentTools

ContentTools là một trình soạn thảo nội dung nhỏ và đẹp. Thư viện không sử dụng bất kỳ khung JavaScript hoặc thư viện nào (thậm chí không phải jQuery) nhưng độc đáo với bất kỳ thư viện nào trong số đó. Gói ContentTools gồm 5 thư viện, mỗi thư viện có thể được sử dụng độc lập. Nó được thiết kế để dễ mở rộng.

Điểm nổi bật

• 49 kb gzipped
• Chỉnh sửa nội tuyến
• Thay đổi kích thước hình ảnh và video
• Hỗ trợ hoàn tác / làm lại

Aloha

Aloha Editor là một thư viện chỉnh sửa nội dung chức năng. Nó cho phép bạn tạo các trải nghiệm chỉnh sửa được nhúng liền mạch trong ứng dụng web của bạn. Điều quan trọng là nó vẫn không hỗ trợ chèn hình ảnh.

Điểm nổi bật

• Kích thước 142KB
• Thân thiện với MS-Word
• Khả năng tương thích trình duyệt chéo
• Có thể tùy chỉnh

TinyMCE

TinyMCE là một nền tảng JavaScript độc lập dựa trên HTML WYSIWYG. Nó cho phép bạn chuyển đổi các trường văn bản HTML hoặc các phần tử HTML khác thành các thể hiện trình soạn thảo. Bạn có thể tải lên và quản lý các tệp trên Microsoft Azure, Google Drive, Amazon S3, DropBox và hơn thế nữa. Nó tuân theo đặc tả WAI-ARIA, làm cho nó tương thích với các trình đọc màn hình như JAWS và NVDA. Ngoài ra còn có một giải pháp doanh nghiệp mà bạn nhận được sự hỗ trợ ưu tiên.

Điểm nổi bật

• Nhúng phương tiện trực tiếp
• Tích hợp chỉnh sửa ảnh
• Kiểm tra chính tả (doanh nghiệp)
• Thân thiện với MS-Word
• Hỗ trợ 40 ngôn ngữ
• Hiệu suất Cross-Browser mạnh mẽ

bootstrap3-wysiwyg

bootstrap3-wysiwyg là một plugin JavaScript giúp dễ dàng tạo các trình soạn thảo WYSIWYG đơn giản, đẹp mắt với sự trợ giúp của thewysihtml5 và Twitter Bootstrap.

Điểm nổi bật

• Đã giảm tối đa 206 KB
• Hỗ trợ RequireJS
• Mẫu tùy chỉnh cho thanh công cụ
• Chủ đề tùy chỉnh có sẵn
• Hiển thị các sự kiện như tải và làm mờ

Summernote

Summernote là một trình soạn thảo văn bản dựa trên Bootstrap. Có nhiều chủ đề khác nhau có sẵn cho nó và chúng được cung cấp bởi Bootswatch. Ngoài ra còn có một phiên bản được chuyển đổi thành Material theme có tên MaterialNote.

Điểm nổi bật

• 80 KB JS + CSS
• Hỗ trợ Bootstrap 3.x.x
• Có thể dễ dàng tích hợp với Django, Rails hoặc Angular
• Dễ dàng tùy chỉnh
• Tích hợp CodeMirror

CKEditor

CKEditor là một trình soạn thảo văn bản HTML sẵn sàng để sử dụng được thiết kế để đơn giản hóa việc tạo nội dung web. Nó mang các tính năng xử lý văn bản phổ biến trực tiếp đến các trang web của bạn.

Điểm nổi bật

• Tùy chỉnh xây dựng bằng cách sử dụng CKBuilder
• MS Word thân thiện
• Chỉnh sửa nội tuyến
• Hoàn tác / làm lại hỗ trợ
• Hỗ trợ RTL
• Hỗ trợ khoảng 60 ngôn ngữ

Trumbowyg

Trumbowyg là nhẹ nhất trong số tất cả các editors được liệt kê ở đây. Trong khi tất cả các trình soạn thảo WYSIWYG hiện có lớn hơn 45kB, Trumbowyg chỉ là 16 KB. Nó phụ thuộc vào jQuery> = 1.7.

Điểm nổi bật

• Chỉ 16 KB
• 30+ Localisations

Redactor

Redactor là một trình soạn thảo nhanh, mạnh mẽ và có thể mở rộng với nhóm hỗ trợ chất lượng. Nó đã được khoảng 7 năm qua và đang được phát triển tích cực. Nó cũng tự động tải hình ảnh lên Amazon S3.

Điểm nổi bật

• Tối thiểu 75 KB
• Chỉnh sửa văn bản nội dòng
• Hỗ trợ CodeMirror
• Chức năng kéo và thả cho hình ảnh
• Vì trình chỉnh sửa dựa trên plugin nên có thể dễ dàng mở rộng.

Kết luận:

Trong bài viết này, tôi đã giới thiệu một số plugin jQuery và HTML5 WYSIWYG được coi tốt nhất. Tôi hy vọng danh sách này sẽ giúp bạn trong việc lựa chọn một trình soạn thảo văn bản tốt cho dự án của bạn và tiết kiệm thời gian tìm kiếm các plugin phù hợp nhất với nhu cầu của bạn.

Tham khảo:

https://www.sitepoint.com/best-html-wysiwyg-plugins/