Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Top Công Cụ Soạn Thảo Văn Bản WYSIWYG Miễn Phí

Top Công Cụ Soạn Thảo Văn Bản WYSIWYG Miễn Phí


Ngày 10 Tháng 6 Năm 2020

Bây giờ bạn cùng mình hãy cùng nhau đi vào tìm hiểu nhựng công cụ WYSIWYG được sử dụng phổ biến trong nhé.

Công cụ soạn thảo văn bản WYSIWYG cho phép người dùng tạo các tài liệu như văn bản, hình ảnh, video... ở ngay trên trang web một cách đơn giản. Ý nghĩa của từ WYSIWYG là "what you see is what you get". Theo mình thấy nó hay được sử dụng cho việc viết bài cho blog, chỉnh sử nội dung...

Trước khi đi vào vấn đề chính thì mình có để đường dẫn bên dưới để có thể giúp bạn hiểu rõ hơn về WYSIWYG nhé.
WYSIWYG

CKEditor với hơn 10 năm kinh nghiệm phát triển thì bạn có thể hoàn toàn yên tâm về chất lượng của trình soạn thảo văn bản này nhé. Nó hỗ trợ hơn 70 ngôn ngữ trong đó có cả Việt Nam và được nhiều lập trình viên sử dụng thì mình nghĩ đây là sự lựa chọn tốt cho trang web của bạn. Không chỉ vậy nó còn có thể chạy trên nhiều trình duyệt khác nhau, làm việc tốt với hầu hết framework front end hiện nay, bạn có thể sử dụng CDN để nhúng trực tiếp vào trang HTML của mình...
Hiện nay nó có hai phiên bản chạy song song là CKEditor 4 và CKEditor5, tùy vào mục đích sử dụng mà bạn sẽ chọn trình soạn thảo phù hợp với mình nhé. Trên trang chủ cũng có miêu tả chi tiết về hai chương trình này bạn có thể tìm hiểu thêm nha.

Trình Soạn Thảo Văn Bản CKEditor

Trumbowyg là một trình sửa mã được tối ưu cho HTML5 và nó hỗ trợ hầu hết các trình duyệt phổ biến như IE9+, Firefox, Chrome... Theo mình thấy nó chứa tất cả các công cụ dành cho soạn thảo văn bản với dung lượng chỉ có 20Kb. Thật nhẹ phải không nào, nó sẽ giúp trang web của bạn có thể chạy mượt mà hơn.
Ngoài ra nó cũng có các plugin hỗ trợ khác giúp bạn có thể làm việc tốt hơn như chèn biểu tượng cảm xúc, hỗ trợ ngôn ngữ các quốc gia khác (bao gồm Việt Nam luôn nhé), thêm âm thanh, chèn ký tự đặc biệt...

Trình Soạn Thảo Văn Bản Trumbowyg

TinyMCE 5 là một trình soạn thảo giúp bạn có thể linh hoạt chỉnh sửa thêm bớt những phần mình mong muốn trong chương trình này một cách dễ dàng. Ngoài các yếu tố cơ bản cho một trình soạn thảo thì mình thấy nó cũng cung cấp nhiều hỗ trợ nhằm giúp trải nghiệm người dùng tốt hơn như là thêm comment, kiểm tra đường dẫn, cung cấp icon và skin cao cấp, kiểm tra lỗi chính tả cho nội dung... Tuy nhiên đây cũng là điểm yếu của nó vì nếu bạn muốn sử dụng các công cụ cao cấp thì phí rơi vào khoảng 25 $ cho một tháng.

Trình Soạn Thảo Văn Bản TinyMCE 5

Quill là một trình soạn thảo mã nguồn mở nên bạn cứ yên tâm sử dụng cho tất cả loại trang web thương mại hay phi thương mại nhé. Nó được xây dựng với nhiều chức năng như thêm đường dẫn, hình ảnh, video hay thêm các đoạn code vào nội dung... Điểm mình thích ở Quill là cách thiết lập dễ dàng, hiển thị được trên tất cả các trình duyệt web hiện đại và responsive trên nhiều màn hình thiết bị, có các bài hướng dẫn chi tiết về các vấn đề thường hay gặp khi sử dụng nó.

Trình Soạn Thảo Văn Bản Quill

Trix là một trình soạn thảo mã nguồn mở giúp bạn có thể soạn tin nhắn, viết bình luận, viết bài... trong trang web một cách dễ dàng. Nó được đánh giá hơn 15K sao trên github và được nhiều lập trình viên sử dụng. Nếu bạn chỉ cần các chức năng cần thiết cho việc tạo nội dung thì Trix theo mình thấy là một lựa chọn tuyệt vời.

Trình Soạn Thảo Văn Bản Trix

Jodit Editor 3 là một trình soạn thảo mã nguồn mở trên github được viết bằng TypeScript thuần mà không sử dụng thêm các thư viện bổ sung nào. Nó cho phép bạn thiết lập bằng nhiều cách như qua npm, tải về, dùng CDN... cho trang web của mình. Điểm mình thấy thích ở nó là ngoài các bài hướng dẫn chi tiết thì còn có thêm chương trình giúp chúng ta có thể tự do trong việc lựa chọn những công cụ để gắn vào Jodit Editor thông qua đoạn code chứa các thuộc tính được tự động thiết lập ở bên dưới.(Cái này ở phần examples nhé)

Trình Soạn Thảo Văn Bản Jodit Editor 3

Summernote là một trình soạn thảo mã nguồn mở trên github với hơn 9K sao bình chọn. Nó được thiết kế thông qua framework Bootstrap với đầy đủ các tính năng cần thiết cho việc tạo nội dung trên trang web. Bạn chỉ cần tải source file css, js của nó và thêm framework Bootstrap(Hỗ trợ hai phiên bản 3 và 4 luôn nhé) là đã có thể sử dụng cho trang web của mình rồi.

Trình Soạn Thảo Văn Bản Summernote

Editor.js là một trình soạn thảo mã nguồn mở theo kiểu block-styled. Nó sẽ không sử dụng các thẻ HTML như các trình soạn thảo thông thường mà nó sẽ xuất nội dung dưới dạng JSON giúp chúng ta có thể dễ dàng quản lý hơn. Nó cũng có các plugin hỗ trợ thông qua việc sử dụng API. Nhờ chức năng này nên bất kỳ lập trình viên nào đều có thể đóng góp thêm nhiều plugin thú vị và hữu ích cho chương trình này.

Trình Soạn Thảo Văn Bản Editor.js

MediumEditor là một trình soạn thảo mã nguồn mở được xây dựng chỉnh sửa nội dung giống với trang web Medium dành chuyên cho những người viết blog. Nó chỉ chứa những tiện ích cơ bản cần thiết cho trình soạn thảo vì vậy dung lượng chỉ khoảng 28kB. Điều này sẽ giúp trang web bạn được tối ưu hơn. Ngoài ra nếu chúng ta muốn thêm các tính năng khác để tối ưu hóa việc chỉnh sửa thì MediumEditor cũng cung cấp thêm những công cụ tiện ích bên ngoài được cập nhật thường xuyên.

Trình Soạn Thảo Văn Bản MediumEditor

Wysihtml là một trình soạn thảo mã nguồn mở được xây dựng bởi nhóm Voog. Nó có đầy đủ chức năng để giúp bạn có thể soạn thảo văn bản một cách dễ dàng và hỗ trợ hầu hết trên các trình duyệt hiện đại, màn hình thiết bị ngày nay. Có một số công cụ mình khá thích ở nó là tự động chuyển đổi các thẻ HTML không hợp lệ, tự động phân tích nội dung khi được sao chép từ Word, PDF , hiển thị nội dung dưới dạng HTML...

Trình Soạn Thảo Văn Bản Wysihtml

ContentTools là một trình soạn thảo mã nguồn mở được xây dựng giúp chỉnh sửa nội dung HTML một cách dễ dàng. Nó cung cấp đầy đủ các tiện ích cho việc soạn thảo nội dung và bạn cũng có thêm các thư viện, tiện ích khác vào trong chương trình một cách dễ dàng (Xem ở phần API nhé). Ngoài ra mình thấy nó có những bài viết về cách thiết lập, thêm hay bỏ những chức năng trong chương trình... rất chi tiết và tỉ mỉ.

Trình Soạn Thảo Văn Bản ContentTools

Froala là một trình soạn thảo dễ dàng thiết lập cho trang web cũng như cho phép bạn có thể mở rộng các tính năng tùy vào mục đích sử dụng. Do được viết bằng javascript thuần nên bạn có thể sử dụng cho hầu hết các framework front-end hiện đại ngày nay. Ngoài ra nó cung cấp rất nhiều công cụ hữu ích như là chỉnh sửa hình ảnh, thêm hay chỉnh sửa video, thêm icon, quản lý bảng... Tuy vậy nếu bạn muốn sử dụng cho mục đích thương mại thì phải mua giấy phép nhé.

Trình Soạn Thảo Văn Bản Froala

Redactor là một trình soạn thảo cung cấp đầy đủ chức năng với thiết kế đơn giản và đẹp mắt. Với hơn 9 năm phát triển bao gồm nhiều plugin hỗ trợ thì mình nghĩ đây là một sản phẩm tốt để bạn dùng cho trang web của mình. Ngoài ra nó có các ví dụ cực kỳ chi tiết cho từng vấn đề các lập trình hay gặp trong quá trình sử dụng chương trình. Tuy vậy nó cũng có điểm hạn chế là bạn sẽ phải mua giấy phép khi sử dụng cho mục đích thương mại.

Trình Soạn Thảo Văn Bản Redactor

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ WYSIWYG hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!