From a60864ab1d04c7be2725e7ee11cc9eff0873b30a Mon Sep 17 00:00:00 2001 From: lkxed Date: Sun, 16 Oct 2022 10:26:44 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=89=8B=E5=8A=A8=E9=80=89=E9=A2=98][tech]:?= =?UTF-8?q?=2020221010=2014=20Best=20Open=20Source=20WYSIWYG=20HTML=20Edit?= =?UTF-8?q?ors.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4 Best Open Source WYSIWYG HTML Editors.md | 382 ++++++++++++++++++ 1 file changed, 382 insertions(+) create mode 100644 sources/tech/20221010 14 Best Open Source WYSIWYG HTML Editors.md diff --git a/sources/tech/20221010 14 Best Open Source WYSIWYG HTML Editors.md b/sources/tech/20221010 14 Best Open Source WYSIWYG HTML Editors.md new file mode 100644 index 0000000000..374e949b85 --- /dev/null +++ b/sources/tech/20221010 14 Best Open Source WYSIWYG HTML Editors.md @@ -0,0 +1,382 @@ +[#]: subject: "14 Best Open Source WYSIWYG HTML Editors" +[#]: via: "https://itsfoss.com/open-source-wysiwyg-editors/" +[#]: author: "Ankush Das https://itsfoss.com/author/ankush/" +[#]: collector: "lkxed" +[#]: translator: " " +[#]: reviewer: " " +[#]: publisher: " " +[#]: url: " " + +14 Best Open Source WYSIWYG HTML Editors +====== +WYSIWYG (What You See Is What You Get) editors are self-explanatory. Whatever you see when editing is what you, a reader/user see. + +Whether you want to build your content management system, or aim to provide an editor to the end-user of your application, an open-source WYSIWYG editor will help provide a secure, modern, and scalable experience. Of course, you also get the technical freedom to customize open-source WYSIWYG editors to meet your requirements. + +Here, we look at some of the best open-source WYSIWYG editors. + +### Things to Look For When Choosing a WYSIWYG HTML Editor + +![best open source wysiwyg editors][1] + +A document editor must be fast for some users and loaded with features. + +Similarly, what are some of the key highlights that you should look at when selecting an HTML editor? Let me give you some pointers here: + +* Is the editor lightweight? +* Does it have SEO-friendly features? +* How well does it let you collaborate? +* Does it offer auto-save functionality? +* Can you check spelling and grammar with it? +* How well does it handle images/galleries? + +When selecting an open-source HTML editor for your app or website, you should look for these essential aspects. + +Keeping these in mind, let me mention some of the best options to try. + +**Note:** *The editors are in no particular order of ranking. You may choose the best for your use case.* + +Table of Contents + +* Things to Look For When Choosing a WYSIWYG HTML Editor +* 1. CKEditor +* 2. Froala +* 3. TinyMCE +* 4. Quilljs +* 5. Aloha Editor +* 6. Editor.js +* 7. Trix +* 8. Summernote +* 9. ContentTools +* 10. Toast UI Editor +* 11. Jodit +* 12. SCEditor +* 13. SunEditor +* 14. ProseMirror +* Picking The Best Open-Source WYSIWYG Editor + +### 1. CKEditor + +![ck5 editor][2] + +#### Key Features: + +* Autosave. +* Drag and drop support. +* Responsive images. +* Supports pasting from Word/GDocs while preserving the formatting. +* Autoformatting, HTML/Markdown support, Font Style customization. +* Image alt text. +* Real-time Collaboration (Premium only). +* Revision History (Premium only). +* Spell and grammar check (Premium only). + +CKEditor 5 is a feature-rich and open-source WYSIWYG editing solution with great flexibility. The user interface looks modern. Hence, you may expect a modern user experience. + +It offers a free edition and a premium plan with extra features. CKEditor is a popular option among enterprises and several publications with a custom Content Management System (CMS), for which they provide technical support and custom deployment options. + +CKeditor’s free edition should provide basic editing capabilities if you do not need an enterprise-grade offering. Check out its [GitHub page][3] to explore. + +[CKEditor 5][4] + +### 2. Froala + +![froala][5] + +#### Key Features: + +* Simple user interface and Responsive Design. +* Easy to integrate. +* HTML/Markdown support. +* Theme/Custom style support. +* Lightweight. +* Image Manager and alt text. +* Autosave. + +Froala is an exciting web editor that you can easily integrate with your existing [open-source CMS][6] like WordPress. + +It provides a simple user interface with the ability to extend its functionality through default plugins. You can use it as a simple editor or add more tools to the interface for a powerful editing experience. + +You can self-host it, but to access its mobile apps and premium support, you must opt for one of the paid plans. Head to its [GitHub page][7] to explore more. + +[Froala][8] + +### 3. TinyMCE + +![tinymce editor][9] + +#### Key Features: + +* Autosave. +* Lightweight. +* Emoticons. +* Manage images. +* Preview. +* Color picker tool. + +TinyMCE is an incredibly popular option for users looking to use a solid editor with several integration options. + +TinyMCE was the editor powering WordPress with proven flexibility and ease of use for all users. Unless you want real-time collaboration and cloud deployments at your disposal, TinyMCE’s free self-hosted edition should serve you well. + +It is a lightweight option with essential features to work with. Check out more about it on its [GitHub page][10]. + +[TinyMCE][11] + +### 4. Quilljs + +![quilljs][12] + +#### Key Features: + +* Lightweight. +* Extend functionalities using extensions. +* Simple and easy to use. + +Do you like Slack’s in-app editor or LinkedIn’s web editor? Quilljs is what they use to offer that experience. + +If you are looking for a polished free, open-source WYSIWYG editor with no premium frills, Quill (or Quilljs) should be the perfect text editor. It is a lightweight editor with a minimal user interface that allows you to customize or add your extensions to scale their functionalities per your requirements. + +To explore its technical details, head to its [GitHub page][13]. + +[Quilljs][14] + +### 5. Aloha Editor + +![A Video from YouTube][15] + +#### Key Features: + +* Fast editor. +* Front-end editing. +* Supports clean copy/paste from Word. +* Easy integration. +* Plugin support. +* Customization for look and feel. + +Aloha Editor is a simple and fast HTML5 WYSIWYG editor that lets you edit the content on the front end. + +You can download and use it for free. But, if you need professional help, you can contact them for paid options. Its [GitHub page][16] should be the perfect place to explore its technical details. + +[Aloha Editor][17] + +### 6. Editor.js + +![editor js 1][18] + +#### Key Features: + +* Block-style editing. +* Completely free and open-source. +* Plugin support. +* Collaborative editing (in roadmap). + +Editor.js gives you the perks of a block-style editor. The headings, paragraphs, and other items are all separate blocks, which makes them editable while not affecting the rest of the content. + +It is an entirely free and open-source project with no premium extras available for upgrade. However, there are several plugins to extend the features, and you can also explore its [GitHub page][19] for more info. + +[Editor.js][20] + +### 7. Trix + +![trix editor][21] + +**Note:** *This project hasn’t seen any new activity for more than a year when writing.* + +Trix is an open-source project by the creators of Ruby on Rails. + +If you want something different for a change, with the basic functionalities of a web editor, Trix can be a pick. The project describes that it is built for the modern web. + +Trix is not a popular option, but it is a respectable project that lets tinkerers try something different for their website or app. You can explore more on its [GitHub page][22]. + +[Trix][23] + +### 8. Summernote + +![summernote][24] + +#### Key Features: + +* Lightweight. +* Simple user interface. +* Plugins supported. + +Want something similar to TincyMCE but simpler? Summernote can be a good choice. + +It provides the look and feel of a classic web editor without any fancy modern UX elements. The focus of this editor is to offer a simple and fast experience along with the ability to add plugins and connectors. + +You also get to change the themes according to Bootstraps used. Yes, an editor on Bootstrap. Explore more about it on its [GitHub page][25]. + +[Summernote][26] + +### 9. ContentTools + +![content tools][27] + +#### Key Features: + +* Easy-to-use. +* Completely free. +* Lightweight. + +Want to edit HTML pages from the front end? Well, ContentTools lets you do that pretty quickly. + +While it can be integrated with a CMS, it may not be a preferred pick for the job. You can take a look around at its [GitHub page][28] as well. + +[ContentTools][29] + +### 10. Toast UI Editor + +![toast ui editor][30] + +#### Key Features: + +* Specially focused on Markdown editing/pages. +* Plugins supported. +* Live Preview. + +Toast UI editor will be a perfect fit if you deal with Markdown documents to publish web pages. + +It offers a live preview and a few essential options for edits. You also get a dark theme and plugin support for extended functions. + +While it does provide useful features, it may not be a feature-rich editor for all. Learn more about it on its [GitHub page][31]. + +[Toast UI Editor][32] + +### 11. Jodit + +![jodit screenshot][33] + +#### Key Features: + +* Lightweight. +* TypeScript based. +* Plugin support. + +Jodit is a TypeScript-based WYSIWYG editor that makes no use of additional libraries. + +It is a simple and helpful editor with all the essential editing features, including drag-and-drop support and a plugin system to extend functionalities. + +The user experience is much similar to WordPress’s classic editor or TinyMCE. You can opt for its pro version to access additional plugins and technical support. Head to its [GitHub page][34] to explore technical details. + +[Jodit][35] + +### 12. SCEditor + +![sceditor][36] + +Key Features: + +* Simple and easy to use. +* Completely free. +* Lightweight. +* Plugins support. + +SCEditor is yet another simple open-source WYSIWYG editor. It may not be popular enough, but it has been actively maintained for more than six years since publishing. + +By default, it does not feature drag-and-drop support, but you can add it using a plugin. There is scope for using multiple themes and customizing the icons as well. Learn more about it on its [GitHub page][37]. + +[SCEditor][38] + +### 13. SunEditor + +![suneditor][39] + +#### Key Features: + +* Feature-rich. +* Completely free. +* Plugin supported. + +Like the last one, SunEditor is not popular enough but works well with its simple and feature-rich offering. + +It is based on pure JavaScript with no dependencies. You should be able to copy from Microsoft Word and Excel without issues. + +Additionally, one can use KaTex (math plugin) as well. It gives you complete freedom with custom plugins as well. There are no premium extras here. Head to its [GitHub page][40] to check out its recent releases. + +### 14. ProseMirror + +![prosemirror][41] + +#### Key Features: + +* Collaboration capabilities. +* Modular. +* Simple. +* Plugins support. + +ProseMirror is an exciting choice for free for users who want collaborative editing capabilities. Most of the WYSIWYG editors offer the collaboration feature for a premium. But here, you can work with others on the same document in real-time (for free). + +It provides a modular architecture that makes maintenance and development more accessible compared to others. + +Explore more about it on its [GitHub page][42]. + +[ProseMirror][43] + +### Picking The Best Open-Source WYSIWYG Editor + +Depending on the type of use case, it is easy to pick a WYSIWYG, an open-source editor. + +If you want to focus on the out-of-the-box experience and reduce efforts to maintain it, any option that provides premium technical support should be a good choice. + +If you are more of a DIY user, you should do anything that serves your requirements. + +Note that a popular option does not mean that it is a flawless editor for your requirements. Sometimes a more straightforward option is a better solution than a feature-rich editor. + +*So, what would be your favorite open-source HTML editor?* *Let me know in the comments below.* + +-------------------------------------------------------------------------------- + +via: https://itsfoss.com/open-source-wysiwyg-editors/ + +作者：[Ankush Das][a] +选题：[lkxed][b] +译者：[译者ID](https://github.com/译者ID) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://itsfoss.com/author/ankush/ +[b]: https://github.com/lkxed +[1]: https://itsfoss.com/wp-content/uploads/2022/10/best-open-source-wysiwyg-editors.png +[2]: https://itsfoss.com/wp-content/uploads/2022/10/ck5-editor.webp +[3]: https://github.com/ckeditor/ckeditor5 +[4]: https://ckeditor.com/ckeditor-5/ +[5]: https://itsfoss.com/wp-content/uploads/2022/10/froala.jpg +[6]: https://itsfoss.com/open-source-cms/ +[7]: https://github.com/froala +[8]: https://froala.com/wysiwyg-editor/ +[9]: https://itsfoss.com/wp-content/uploads/2022/10/tinymce-editor.jpg +[10]: https://github.com/tinymce/tinymce +[11]: https://www.tiny.cloud/ +[12]: https://itsfoss.com/wp-content/uploads/2022/10/quilljs.jpg +[13]: https://github.com/quilljs/quill +[14]: https://quilljs.com/ +[15]: https://youtu.be/w_oXaW5Rrpc +[16]: https://github.com/alohaeditor/Aloha-Editor +[17]: https://www.alohaeditor.org/ +[18]: https://itsfoss.com/wp-content/uploads/2022/10/editor-js-1.jpg +[19]: https://github.com/codex-team/editor.js +[20]: https://editorjs.io/ +[21]: https://itsfoss.com/wp-content/uploads/2022/10/trix-editor.jpg +[22]: https://github.com/basecamp/trix +[23]: https://trix-editor.org/ +[24]: https://itsfoss.com/wp-content/uploads/2022/10/summernote.jpg +[25]: https://github.com/summernote/summernote/ +[26]: https://summernote.org/ +[27]: https://itsfoss.com/wp-content/uploads/2022/10/content-tools.jpg +[28]: https://github.com/GetmeUK/ContentTools +[29]: https://getcontenttools.com/ +[30]: https://itsfoss.com/wp-content/uploads/2022/10/toast-ui-editor.jpg +[31]: https://github.com/nhn/tui.editor +[32]: https://ui.toast.com/tui-editor +[33]: https://itsfoss.com/wp-content/uploads/2022/10/jodit-screenshot.jpg +[34]: https://github.com/xdan/jodit +[35]: https://xdsoft.net/jodit/ +[36]: https://itsfoss.com/wp-content/uploads/2022/10/sceditor.jpg +[37]: https://github.com/samclarke/SCEditor +[38]: https://www.sceditor.com/ +[39]: https://itsfoss.com/wp-content/uploads/2022/10/suneditor.png +[40]: https://github.com/JiHong88/SunEditor +[41]: https://itsfoss.com/wp-content/uploads/2022/10/prosemirror.jpg +[42]: https://github.com/ProseMirror/prosemirror +[43]: https://prosemirror.net/