[手动选题][tech]: 20221010 14 Best Open Source WYSIWYG HTML Editors.md

2024-12-23 21:20:42 +08:00 · 2022-10-16 10:26:44 +08:00 · 2022-10-16 10:26:44 +08:00 · a60864ab1d
commit a60864ab1d
parent 059793c8ab
1 changed files with 382 additions and 0 deletions
--- a/sources/tech/20221010
+++ b/sources/tech/20221010
@ -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/