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ở tốt nhất mà 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 soạn thảo WYSIWYG HTML xuất hiện. Các trình biên tập HTML của WYSIWYG cung cấp các tùy chọn trực quan để 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 WYSIWYG HTML 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 các trình soạn thảo 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 nên đọ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 gặp. 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 soạn thảo WYSIWYG nhanh và nhẹ, 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ỉ bằng cách sao chép-dán một vài dòng mã, bạn có thể biến bất kỳ dòng mã nào thành trình soạn thảo WYSIWYG HTML 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ư ở 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 mà 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 trực quan, bạn vẫn có thể <strong> xem mã HTML thô </strong> và thực hiện đ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 loading = "lazy" / p> <ul> <li> Không được cập nhật trong vài năm tới </li> </ul> <p> <strong> Nhận định: </strong> <br> Được viết bằng JavaScript, mã nguồn mở OpenWYSIWYG HTML editor 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 để đưa 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> <a href = "http://www.openwebware.com/ demo "target =" _ blank "rel =" noopener noreferrer "> Tải xuống OpenWYSIWYG </a> </strong> </p> <h3> 3. TinyMCE (Community Edition) </h3> <p> Trình chỉnh sửa HTML WYSIWYG 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 <a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer"> không miễn phí </a>, nhưng Phiên bản Cộng đồng là miễn phí và mã nguồn mở. 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à 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ẫu 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 loading = "lazy" class = "penci-lazy border aligncenter wp-image- 34916 size-full "src =" https://techwiser.com/wp-content/uploads/2018/07/TinyMCE.jpg "data-src =" https: // techwiser. Giao diện người dùng thân thiện và rất nhiều tính năng, là một gói hoàn chỉnh. Nếu bạn chỉ muốn có 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 ít 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 kiểu máy Pro mà bạn luôn có thể dùng thử. </p> <p> <strong> <a href = "https://www.tiny.cloud/docs/demo/full -featured / "target =" _ blank "rel =" noopener noreferrer "> Tải bản trình diễn TinyMCE </a> </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 qua liên kết hoặc nhúng chúng. Điều tốt nhất tôi thích ở Jodit là nó đi kèm với một <strong> trình chỉnh sửa ACE </strong> ngoài hộp và chỉ 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 loading = "lazy" class = "penci-lazy border aligncenter wp-image-34917 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" alt = "Giao diện người dùng Jodit" width = "677" height = "394" data-srcset = "https : //techwiser.com/wp-content/uploads/2018/07/Jodit.jpg 677w, https://techwiser.com/wp-content/uploads/2018/07/Jodit-300x175. jpg 300w "Size =" (max-width: 677px) 100vw, 677px "> </p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 2 "style =" float: none; lề: 0px 0 0px 0; text-align: center; "> <ins class =" adsbygoogle "style =" display: inline-block; width: 336px; height: 280px "data-ad-client =" ca-pub-3072677420592088 "data-ad-slot = "1324909417"> </ins> </div> <p> <strong> Ưu điểm: </strong> </p> <ul> <li> Dung lượng nhẹ, không có thư viện </li> <li> Kéo-n- drop </li> <li> Trình chỉnh sửa ACE 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 chỉnh sửa 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> <a href = "https://xdsoft.net/jodit/play.html" target = "_blank" rel = "noopener noreferrer"> <strong> Nhận Sân chơi Jodit </strong> </a> </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 chỉnh sửa 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 định dạng tùy chọn theo nhu cầu của bạn. 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, điểm tuyệt vời 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à thêm các tính năng mới. Các ví dụ bao gồm hỗ trợ cho các plugin và phiên bản Summernote phiên bản nhỏ hoặc vani không yêu cầu Bootstrap. </p> <p> <img loading = "lazy" class = "penci-lazy border aligncenter wp-image-34918 size-full "src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg "data-src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote .jpg "alt =" Trình chỉnh sửa trực quan Summernote "width =" 677 "height =" 441 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg 677w, Summernote xứng đáng được dùng thử. </p> <p> <strong> <a href="https://summernote.org/" target="_blank" rel="noopener noreferrer"> Tải xuống Bản trình diễn Summernote </a> </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. Đây 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 khả năng tích hợp dễ dàng và thiết kế gọn gàng. </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 chỉ có tăng 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, điều này cực kỳ thuận tiện. </p> <p> Giống như TinyMCE, <a href="https://www.froala.com/wysiwyg-editor/pricing"> Froala có rất nhiều phiên bản </a>, nhưng ngay cả phiên bản miễn phí cũng có rất nhiều điểm nhấn. Điểm 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 loading = "lazy" class = "penci-lazy border aligncenter wp-image-34919 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Froala. jpg "alt =" Froala WYSIWYG HTML editor mã nguồn mở "width =" 677 "height =" 394 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg 677w, https://techwiser.com/wp-content/uploads/2018/07/Froala-300x175.jpg 300w "size =" (max-width: > <strong> Nhận Froala </strong> </a> </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ở trình soạn thảo WYSIWYG HTML đượ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 ở đó để 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 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 loading = "lazy" p> <strong> Ưu điểm: </strong> </p> <ul> <li> Tài liệu, bài kiểm tra, câu hỏi chi tiết </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> <a href = "https: //ckeditor.com/ "target =" _ blank "rel =" noopener noreferrer "> Nhận CKEditor </a> </strong> </p> <p> <strong> Đề cập danh dự: </strong> </p> <p> 1. <a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer"> MediumEditor </a> là một bản sao mã nguồn mở của trình chỉnh sửa WYSIWYG nội tuyến cho Medium.com . Nó thật đơn giản, nhẹ và không có bất kỳ phụ thuộc nào. Mặc dù nó không quá mạnh, nhưng 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. <a href="https://atom.io/packages/atom-html-preview" target="_blank" rel="noopener noreferrer"> gói Xem trước HTML </a> của Atom cho phép bạn thêm ngăn 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ở tốt nhất của WYSIWYG HTML Editor </h3> <p> Trong khi HTML vẫn là cách mạnh mẽ hơn để xây dựng một trang web và nhiều thứ phức tạp hơn có thể thực hiện được với nó, Các biên tập viên của WYSIWYG đã có được 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ở của trình chỉnh sửa HTML WYSIWYG. </p> <p> <strong> Cũng nên đọc: </strong> <a href = "https : //techwiser.com/open-source-browser-for-android/ "> 7 trình duyệt mã nguồn mở tốt nhất cho Android (2018) </a> </p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 3 "style =" float: none; margin: 0px 0 0px 0; text-align: center; "> <ins class =" adsbygoogle "style =" display: block; text-align: center; " data-ad-layout = "in-article" data-ad-format = "linh hoạt" data-ad-client = " ca-pub-3072677420592088 "data-ad-slot =" 2804037256 "> </ins> </div> <div style =" font-size: 0px; chiều cao: 0px; line-height: 0px; lề: 0; đệm: 0; clear: both; "> </div> <div class =" penci-single-link-pages "> </div>