7 mã nguồn mở WYSIWYG HTML Editor tốt nhất

Có hai loại trình soạn thảo mã - Trình soạn thảo dựa trên văn bản đơn giản và WYSIWYG (những gì bạn thấy là những gì bạn nhận được). Trong bài viết trước của chúng tôi, chúng tôi đã thảo luận về một sốTrình chỉnh sửa HTML nguồn mở nơi bạn nhập mã theo cách thủ công. Mặc dù không có vấn đề gì với các trình soạn thảo HTML dựa trên văn bản, nhưng chúng cũng không kém phần cũ kỹ. Và đó là nơi mã nguồn mở của trình chỉnh sửa HTML WYSIWYG xuất hiện. Trình chỉnh sửa HTML của WYSIWYG cung cấp các tùy chọn dựa trên hình ảnh để xây dựng một trang web mà không cần bất kỳ kiến ​​thức lập trình nào (hãy nhớ Wix Ad, đó là wizzy-sig)

Trình soạn thảo HTML WYSIWYG có một số ưu điểm so với các trình soạn thảo dựa trên văn bản. Để bắt đầu, bạn có thể xây dựng một trang web bằng trình chỉnh sửa WYSIWYG ngay cả khi bạn không biết cách viết mã. Tất cả những gì bạn phải làm là kéo và thả các mục trong trình chỉnh sửa và sau khi hoàn tất, chỉ cần sao chép mã. Tuy nhiên, việc tìm kiếm một trình soạn thảo WYSIWYG HTML mã nguồn mở tốt có thể là một việc vặt. Đây là nơi chúng tôi đi vào.

Cũng đọc: Hơn 50 ứng dụng Android nguồn mở khi bạn muốn từ bỏ Google

Mã nguồn mở trình chỉnh sửa HTML WYSIWYG tốt nhất

1. Pell

Pell có lẽ là trình soạn thảo WYSIWYG nhỏ nhất và đơn giản nhất mà bạn từng xem qua. Nó có kích thước đúng là 1,38 kb!

Nó cung cấp tất cả các chức năng và định dạng cơ bản như tiêu đề, in đậm, nghiêng, danh sách, trích dẫn, liên kết và hình ảnh. Các hành động khả dụng khác bao gồm thụt đầu dòng, ký tự trên, ký tự phụ, tên và kích thước phông chữ. Sau khi bạn viết và định dạng xong với Pell, nó sẽ xuất ra toàn bộ mã HTML mà sau đó bạn có thể chỉ cần sao chép và dán trên trang web hoặc trang của mình và bạn đã sẵn sàng.

Ưu điểm:

• WYSIWYG nhỏ nhất và nhẹ nhất
• Không phụ thuộc
• Dễ dàng tùy chỉnh

Nhược điểm:

• Không cần chỉnh sửa HTML ưa thích
• Hình ảnh chỉ thông qua các liên kết

Nhận định:
Xem xét kích thước của nó, Pell tạo ra một gói hấp dẫn. Nhưng thành thật mà nói, bạn chỉ có thể hoàn thành các tệp HTML cơ bản với các tùy chọn chỉnh sửa hạn chế. Vì vậy, nếu bạn là người đang tìm kiếm một trình chỉnh sửa WYSIWYG nhanh và nhẹ, là mã nguồn mở cho một số công việc rất cơ bản, chắc chắn hãy xem Pell.

Nhận Pell

2. OpenWYSIWYG

OpenWYSIWYG là một trình soạn thảo HTML đa dạng thức trên nhiều trình duyệt được mã hóa hoàn toàn bằng JavaScript. Chỉ cần sao chép và dán một vài dòng mã, bạn có thể biến bất kỳ vào trình chỉnh sửa HTML WYSIWYG mạnh mẽ của OpenWYSIWYG.<p> <p>Giao diện người dùng và các tùy chọn chỉnh sửa với menu thả xuống rất giống với bất kỳ trình soạn thảo văn bản nào và bạn sẽ cảm thấy như đang ở nhà. Ngoài tất cả các tùy chọn định dạng cơ bản, OpenWYSIWYG tự hào có bộ chọn màu nâng cao với 216 màu web để lựa chọn và một công cụ định dạng bảng mạnh mẽ với mọi tùy chọn bạn có thể nghĩ đến.</p> <p>Một điều tuyệt vời khác về OpenWYSIWYG là cùng với tất cả các tùy chọn hình ảnh, bạn vẫn có thể<strong>xem mã HTML thô</strong> và thực hiện các điều chỉnh trực tiếp trong mã. Hữu ích khi bạn muốn học hoặc làm mới kỹ năng viết mã của mình.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 mã nguồn mở WYSIWYG HTML Editor tốt nhất"></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Môi trường chỉnh sửa mạnh mẽ</li> <li>Giao diện người dùng trực quan và dễ dàng</li> <li>Bộ chọn màu và các tùy chọn chỉnh sửa bảng mở rộng</li> </ul> <p><strong>Nhược điểm:</strong></p> <ul> <li>Không được cập nhật trong một vài năm</li> </ul> <p><strong>Nhận định:</strong><br> Được viết bằng JavaScript, mã nguồn mở của trình soạn thảo HTML OpenWYSIWYG sẽ hoạt động với bất kỳ ngôn ngữ lập trình web nào khác. Nếu bạn đang tìm kiếm thứ gì đó mạnh hơn Pell một chút để kết hợp vào ứng dụng web của mình, thì đây là một lựa chọn tuyệt vời.</p> <p><strong>Tải OpenWYSIWYG</strong></p> <h3>3. TinyMCE (Phiên bản cộng đồng)</h3> <p>Trình soạn thảo WYSIWYG HTML mã nguồn mở tiếp theo trong danh sách của chúng tôi là TinyMCE. Nó cũng được viết hoàn toàn bằng JavaScript và cung cấp giao diện người dùng và trải nghiệm giống như hầu hết các trình xử lý văn bản. Điều đó làm cho nó thân thiện hơn với người dùng.</p> <p>TinyMCE không miễn phí, nhưng Phiên bản Cộng đồng là phiên bản mã nguồn mở và miễn phí. Nó đi kèm với tất cả các tùy chọn chỉnh sửa cơ bản như định dạng văn bản, danh sách, bảng và cũng có một số tùy chọn chỉnh sửa hình ảnh.</p> <p>Các nhà phát triển đã giữ nguyên giá của các mô hình cao cấp theo số lượng người dùng. Một số tính năng cao cấp bao gồm hỗ trợ Google Drive và Microsoft Azure, tiện ích mở rộng, trình kiểm tra chính tả và liên kết cũng như hỗ trợ kỹ thuật.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="Nếu bạn phải có kinh nghiệm lập trình trước đó và không có thời gian để học, bạn hoàn toàn có thể thoát khỏi bằng cách sử dụng mã nguồn mở trình soạn thảo WYSIWYG HTML. Tuy nhiên, việc tìm kiếm một WYSIWYG HTML Editor tốt không phải là dễ dàng, đặc biệt nếu bạn cần nó là một mã nguồn mở và miễn phí."></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Hỗ trợ mở rộng</li> <li>Quản lý tệp</li> <li>Hỗ trợ kỹ thuật</li> <li>Trình chỉnh sửa mã kiểu IDE cho HTML</li> </ul> <p><strong>Nhược điểm:</strong></p> <ul> <li>Đắt tiền</li> <li>Không hoàn toàn mã nguồn mở</li> </ul> <p><strong>Nhận định:</strong><br> TinyMCE với tùy chọn tích hợp dễ dàng, giao diện người dùng thân thiện và nhiều tính năng, là một gói hoàn chỉnh. Nếu bạn chỉ muốn mã nguồn mở trình soạn thảo WYSIWYG HTML giàu tính năng nhất và có thể chi tiêu một số tiền, thì TinyMCE là lựa chọn phù hợp. Ngoài ra, họ cung cấp bản dùng thử miễn phí một tháng cho mô hình Pro của họ mà bạn luôn có thể kiểm tra.</p> <p><strong>Nhận bản trình diễn TinyMCE</strong></p> <h3>4. Jodit</h3> <p>Jodit là một trình soạn thảo mã nguồn mở WYSIWYG HTML nhanh và nhẹ khác mà bạn có thể nhúng vào mã của mình và bắt đầu chỉnh sửa trang của mình. Nó khá nhẹ với kích thước khoảng 100 KB và được viết hoàn toàn bằng TypeScript. Đó là lý do tại sao bạn không cần bất kỳ phụ thuộc hoặc thư viện nào để chạy nó.</p> <p>Nó cũng đi kèm với giao diện kéo-n-thả cho hình ảnh. Bạn cũng có thể đính kèm video YouTube hoặc Vimeo thông qua liên kết hoặc nhúng chúng. Điều tốt nhất tôi thích về Jodit là nó đi kèm với một <strong>ACE biên tập</strong> ra khỏi hộp và với một nút duy nhất, bạn có thể chuyển đổi giữa mã thực và chế độ xem trước.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="html, wysiwyg, chỉnh sửa, tùy chọn, openurce, editopenurce, ưu, mã, văn bản, nhược điểm, hỗ trợ, biên tập viên, dựa trên, phán quyết, bootstrap"></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Nhẹ, không có thư viện</li> <li>Kéo-n-thả</li> <li>ACE biên tập viên ra khỏi hộp</li> <li>Hỗ trợ kỹ thuật (Có trả phí)</li> </ul> <p><strong>Nhận định:</strong><br> Jodit cung cấp những gì tốt nhất của cả hai thế giới - trình soạn thảo WYSIWYG trực quan dễ dàng cũng như chỉnh sửa mã thô. Nếu bạn là người có ít nhất một số kiến ​​thức về HTML, Jodit có thể là lựa chọn tốt nhất cho bạn.</p> <p><strong>Nhận sân chơi Jodit</strong></p> <h3>5. Summernote</h3> <p>Summernote là một trình soạn thảo WYSIWYG mã nguồn mở siêu đơn giản được xây dựng trên jQuery và dựa trên Bootstrap. Vì nó hỗ trợ Bootstrap, bạn có thể sử dụng tất cả các phong cách và chủ đề được hỗ trợ trên trình chỉnh sửa của mình từ Bootswatch.</p> <p>Bản thân mã nguồn mở của trình biên tập HTML WYSIWYG có giao diện người dùng rất gọn gàng và tối thiểu và bạn thậm chí có thể chỉnh sửa hoặc thêm các tùy chọn định dạng theo nhu cầu của mình. Với Chế độ không khí của Summernote, bạn có thể ẩn toàn bộ thanh công cụ và chỉnh sửa tài liệu của mình một cách nhanh chóng. Tiện lợi. Nó cũng có thể tự động chuyển đổi tất cả các hình ảnh sang base64, vì vậy bạn không phải xử lý hình ảnh nào cả.</p> <p>Đối với tôi, phần hay nhất về Summernote là đội ngũ các nhà phát triển chăm chỉ đằng sau nó, những người luôn lắng nghe cộng đồng và bổ sung các tính năng mới. Ví dụ bao gồm hỗ trợ cho các plugin và phiên bản Summernote nhẹ hoặc vani không yêu cầu Bootstrap.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 mã nguồn mở WYSIWYG HTML Editor tốt nhất"></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Đường cong học tập tối thiểu</li> <li>Chế độ Air để chỉnh sửa khi đang bay</li> <li>Hỗ trợ Bootstrap 3.x.x đến 4.x.x</li> <li>Xem và chỉnh sửa trong HTML</li> </ul> <p><strong>Nhược điểm:</strong></p> <ul> <li>Yêu cầu Bootstrap</li> </ul> <p><strong>Nhận định:</strong><br> Summernote có lẽ là trình soạn thảo WYSIWYG HTML mã nguồn mở nhưng miễn phí và giàu tính năng nhất hiện có trên thị trường và nó không ngừng được cải thiện. Nếu bạn đang làm việc với Bootstrap, thì Summernote không có trí tuệ nhưng ngay cả khi bạn không làm như vậy, Summernote xứng đáng được thử.</p> <p><strong>Nhận bản trình diễn Summernote</strong></p> <h3>6. Froala</h3> <p>Froala là một trình soạn thảo WYSIWYG HTML mã nguồn mở tuyệt đẹp được viết bằng JavaScript. Nó là một trong những công cụ phổ biến hơn trong danh sách này và sự phổ biến của nó đối với các nhà phát triển có thể là do dễ dàng tích hợp và thiết kế sạch sẽ.</p> <p>Bản thân Froala là một trình soạn thảo rất mạnh mẽ và vô số plugin đã tăng lên như nhau. Một số trong số chúng bao gồm trình chỉnh sửa hình ảnh nâng cao, biểu tượng cảm xúc, trình kiểm tra chính tả và thậm chí rất dễ dàng để tạo plugin của riêng bạn. Tất cả các công cụ cũng có thể được truy cập bằng trình chỉnh sửa nội tuyến, vô cùng tiện lợi.</p> <p>Giống như TinyMCE, Froala có rất nhiều hương vị, nhưng ngay cả phiên bản miễn phí cũng có rất nhiều điểm nhấn. Sự khác biệt duy nhất là bạn sẽ không nhận được mã nguồn đầy đủ và hỗ trợ kỹ thuật.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 mã nguồn mở WYSIWYG HTML Editor tốt nhất"></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Trình chỉnh sửa mạnh mẽ nhẹ</li> <li>Chỉnh sửa nội tuyến</li> <li>Rất nhiều plugin</li> </ul> <p><strong>Nhược điểm:</strong></p> <ul> <li>Không tuyệt vời cho ứng dụng / trang web kết hợp dành cho thiết bị di động</li> </ul> <p><strong>Nhận định:</strong><br> Froala nhanh và nhẹ với giao diện người dùng đẹp mắt nhưng vẫn quản lý để mang lại tất cả các tính năng mà người ta có thể đang tìm kiếm trong trình chỉnh sửa HTML WYSIWYG. Nếu bạn không sao mà không cần mã nguồn và hỗ trợ, phiên bản miễn phí sẽ phục vụ bạn tốt, nếu không thì bạn biết phải làm gì.</p> <p><strong>Nhận Froala</strong></p> <h3>7. CKEditor</h3> <p>CKEditor cực kỳ phổ biến với người dùng vì là một mã nguồn mở biên tập HTML WYSIWYG được thiết kế đẹp mắt. Nó đi kèm với hơn 21 nghìn bài kiểm tra để giúp bạn học HTML trong một bố cục thân thiện. Tài liệu chi tiết có sẵn để giúp bạn trau dồi thêm các kỹ năng của mình. Một số tên tuổi lớn nhất trong ngành công nghệ tin tưởng nó.</p> <p>Lưu ý rằng bạn sẽ phải giữ nguyên các thông báo bản quyền trong mỗi tệp và không được xóa tệp LICENSE.md nằm trong thư mục cài đặt CKEditor. Đó không phải là một nhược điểm, đặc biệt là khi bạn nhận được rất nhiều giá trị để đổi lại.</p> <p>Có hỗ trợ cho các plugin, @mention, biểu tượng cảm xúc, trình duyệt cũ và thậm chí là tính năng tự động hoàn thành có thể tiết kiệm rất nhiều thời gian.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="Nếu bạn phải có kinh nghiệm lập trình trước đó và không có thời gian để học, bạn hoàn toàn có thể thoát khỏi bằng cách sử dụng mã nguồn mở trình soạn thảo WYSIWYG HTML. Tuy nhiên, việc tìm kiếm một WYSIWYG HTML Editor tốt không phải là dễ dàng, đặc biệt nếu bạn cần nó là một mã nguồn mở và miễn phí."></p> <p><strong>Ưu điểm:</strong></p> <ul> <li>Tài liệu chi tiết, bài kiểm tra, câu hỏi</li> <li>Cộng tác và @mention</li> <li>Tự động hoàn thành</li> </ul> <p><strong>Nhược điểm:</strong></p> <ul> <li>Giữ tệp giấy phép</li> </ul> <p><strong>Nhận CKEditor</strong></p> <p><strong>Đề cập danh dự:</strong></p> <p>1. MediumEditor là một bản sao mã nguồn mở của trình soạn thảo WYSIWYG nội tuyến cho Medium.com. Nó rất đơn giản, nhẹ và không có bất kỳ sự phụ thuộc nào. Mặc dù nó không phải là mạnh mẽ, nó có thể hoạt động như một công cụ chỉnh sửa nội tuyến tuyệt vời cho văn bản hoặc các tài liệu liên quan đến văn bản.</p> <p>2. Gói Xem trước HTML của Atom cho phép bạn thêm khung xem trước trong đó bạn có thể xem trước trực tiếp mã HTML của mình, điều này có thể rất hữu ích cho các nhà phát triển. Mặc dù điều này chắc chắn không dành cho người mới bắt đầu, nhưng đây là một gói tuyệt vời để thêm vào quy trình làm việc hiện tại của bạn nếu bạn đã lập trình bằng HTML.</p> <h3>Mã nguồn mở trình chỉnh sửa HTML WYSIWYG tốt nhất</h3> <p>Mặc dù HTML vẫn là cách mạnh mẽ hơn để xây dựng một trang web và có thể thực hiện được nhiều thứ phức tạp hơn với nó, nhưng các biên tập viên WYSIWYG đã đảm bảo một vị trí của riêng họ. Học viết mã đòi hỏi đầu tư nhiều thời gian và năng lượng và có thể không có ý nghĩa đối với tất cả mọi người. Nếu bạn đã có kinh nghiệm lập trình trước đó và không có thời gian tìm hiểu, bạn hoàn toàn có thể thoát khỏi bằng cách sử dụng mã nguồn mở trình biên tập HTML WYSIWYG.</p> <p><strong>Cũng đọc:</strong> <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 trình duyệt mã nguồn mở tốt nhất cho Android (2018)</a></p>