1. NicEdit
NicEdit is an alternative to some of the larger, more complex WYSIWYG editors out there, with its small download size. It boasts many of the expected editor features and easily integrates into your site.
2. TinyMCE
is an open-source JavaScript HTML WYSIWYG editor. It’s easy to integrate, and is highly customisable with themes and plugins. TinyMCE is one of the more “complete” editors out there, offering an experience similar to MSWord.
3. CKEditor
CKeditor is the new FCKEditor that proved to be the market leader previously. It builds from that, and aims to fix what FCKEditor got wrong. The result is a high performance WYSIWYG editor that offers editing features comparable to MSWord and Open Office.
4. YUI Rich Text Editor
The YUI Rich Text Editor is a UI control from Yahoo that turns textarea’s into fully functioning WYSIWYG editors. It comes in several different versions of varying features and complexity, but still manages to achieve a great user experience without a plethora of buttons crowding the interface.
5. MarkItUp!
Markitup is a jQuery plugin that allows you to turn the text areas into markup editors in any markup you wish. HTML, Wiki syntax, and BBcode are just a few that are supported. Markitup is not a WYSIWYG editor, but that doesn’t hold it back from offering all the basic features you’d expect, and a lightweight download that works well.
6. FreeTextBox
FreeTextBox is an HTML editor specifically for ASP.NET. The look and feel of the editor is the most like Microsoft Word that you are likely to get. The free version does lack a couple further features, but has more than enough to get you going.
7. MooEditable
WYSIWYG editors have become common as plugins for the popular jQuery library, but not so common on Mootools. MooEditable though, fills that void, by providing a simple, but effective user experience to the user, by building on top of a well written JavaScript library. If you’re a Mootools fan, then you’ll have no problems with this.
8. OpenWysiwyg
OpenWYSIWYG is a cross browser rich text editor with almost every editing capability you could want. It features a sleek user interface including drop-downs and buttons. High on its features is its capacity to handle tables well, with different borders and colours. However, Chrome is still not supported.
9. Spaw Editor
Spaw Editor is a web-based in-browser WYSIWYG editor control that enables web site developers to replace a standard text area HTML control with full-featured, fully customizable, multilingual, skinable web-based WYSIWYG editor.
10. jHtmlArea
jHtmlArea is another WYSIWYG text editor built as a plugin for the popular jQuery library. It’s purpose is to be simple and lightweight, and it serves this well, with only the most needed options included in the plugin. It allows itself to be easily customised from the looks to the functions down to the language.
Further Discussion?
If you have used one of these before, or have used another web-based Rich Text editor that you think deserves a mention, then go ahead and add them in the comments area below. We’d love to hear from you on the subject!
Allowing users, and clients to format their text without delving into code has long been on developers’ priority lists, but these days, providing this usability is far easier than it once was. Here are 10 WYSIWYG editors that are commonly used, and are worth a look in if its something you need for a project.Minimal WYSIWYG Editors In Pure JavaScript
Awesome WYSIWYG EDITORS
tinymce quill ckeditor flora Slate suneditor top free alternatives demos
Standalone
WYSIWYG Editors that can be use without dependecy to other libraries or frameworks.Adiptal Editor - Free & Upgradable to $ Non-Free - Adiptal Editor is an iframe-based WYSIWYG Editor built on JavaScript. With advanced features & custom elements, it gives clean output to design responsive pages.
Aloha Editor - Aloha Editor is a JavaScript content editing library.
CKEditor 4 - Battle-tested WYSIWYG HTML editor.
CKEditor 5 - A set of ready to use rich text editors created with a powerful framework.
Content Tools - A JS library for building WYSIWYG editors for HTML content.
Editor.js - A block-styled editor with clean JSON output.
Etherpad - Etherpad: Really real-time collaborative document editing.
Froala Editor $ Non-Free ⊘ Proprietary - A beautifuly designed WYSIWYG Rich Text Editor based on
grande.js - It's a Medium at Starbucks. Pinky ring out.
Jodit - Rich HTML WYSIWYG Editor and FileBrowser.
Medium Editor - Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Medium.js - A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor).
Milkdown - Plugin driven WYSIWYG markdown editor framework.
Mobiledoc Kit - A toolkit for building WYSIWYG editors with Mobiledoc.
Pell - The simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies.
Pen Editor - Enjoy live editing (+markdown).
Quill - A modern rich text editor built for compatibility and extensibility.
SCEditor - A lightweight WYSIWYG BBCode and XHTML editor.
Scribe - Deprecated A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults.
Squire - An HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible.
Substance - A JavaScript library for web-based content editing.
SunEditor - Pure javascript based WYSIWYG html editor, with no dependencies.
TinyMCE - A JavaScript library for platform independent 'WYSIWYG' or rich text editing.
tiptap - The headless editor framework for web artisans.
Trix - A rich text editor for everyday writing.
Tui Editor - Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
UEditor - UEditor is a WYSIWYG rich web editor developed by Baidu fex-team. It is lightweight, customizable, and user-oriented.
wangEditor - A lightweight rich text editor, friendly API and use extremely convenient.
web-component-designer - A WYSIWYG Designer for webcomponents as a webcomponent. Live Demo: here
wysihtml - Open source rich text editor for the modern web.
on CodeMerge - A modular, open source rich text editor.
jQuery Based
jQuery required editorsbootstrap-wysiwyg - Tiny bootstrap-compatible WYSIWYG rich text editor.
Dante Editor - Just another Medium wysiwyg editor clone.
Easyeditor - Very lightweight and highly configurable rich text html editor.
jQuery-Notebook - A modern, simple and elegant WYSIWYG rich text editor.
popline - An HTML5 Rich-Text-Editor Toolbar.
simditor - An Easy and Fast WYSIWYG Editor.
Summernote - Super simple WYSIWYG editor.
Toast UI Editor - Markdown WYSIWYG Editor - Productive and Extensible.
Trumbowyg - A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip).
For Angular
Editors for your Angular-based project.angular-froala-wysiwyg $ Non-Free - Angular 4 to Angular 9 bindings for Froala WYSIWYG Editor.
ckeditor4-angular - An official CKEditor 4 rich text editor component for Angular 2+.
ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+.
ngx-summernote - Summernote wysiwyg editor for Angular.
jodit-angular - Angular wrapper around Jodit to make it easier to use in a Angular.
ngx-quill - An Angular (>=2) component for the Quill Rich Text Editor.
textAngular - A radically powerful Text-Editor/Wysiwyg editor for Angular.js.
tinymce-angular - official Angular wrapper for TinyMCE.
ngx-wig - Angular WYSIWYG HTML Rich Text Editor (Inspired from Angular.js ngWig)
ngx-editor - Rich Text Editor for Angular using ProseMirror)
For React
Editors for your React-based project.Alloy Editor - WYSIWYG editor based on CKEditor with completely rewritten UI.
bangle.dev - Higher level collection of ProseMirror components for building rich text editors.
BlockNote - Block-based editor based on ProseMirror and TipTap, meant to be easier to set up and learn.
ckeditor4-react - An official CKEditor 4 rich text editor component for React.
ckeditor5-react - An official CKEditor 5 rich text editor component for React.
Dante II - A complete rewrite of dante editor in draft-js.
Draft.js - A JavaScript rich text editor framework, built for React and backed by an immutable model.
jodit-react - React component for Jodit Editor.
lexical- An extensible text editor framework, successor to Draft.js by Meta.
megadraft - Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility
Plasmic - A WYSIWYG visual builder that lets you drag and drop React components.
Plate - The rich-text editor for React.
React Draft Wysiwyg - A Wysiwyg editor build on top of React and DraftJS.
react-froala-wysiwyg $ Non-Free - React component for Froala WYSIWYG HTML Rich Text Editor.
react-mobiledoc-editor - A Mobiledoc editor written with React and Mobiledoc-Kit.
react-quill - A Quill component for React.
react-rte - Pure React rich text "WYSISYG" editor based on draft-js.
react-simple-wysiwyg - Simple and lightweight React WYSIWYG editor
react-summernote - Summernote (Super simple WYSIWYG editor) adaptation for React.
react-trix - React wrapper for Basecamp's Trix editor.
Slate JS - A completely customizable framework.
suneditor-react - Pure React Component for SunEditor (Pure javascript based WYSIWYG html editor, with no dependencies).
tinymce-react - official React wrapper for TinyMCE.
For Vue
Editors for your Vue-based project.umo-editor - Umo Editor is an open-source document editor, based on Vue3.
ckeditor4-vue - An official CKEditor 4 rich text editor component for Vue.
ckeditor5-vue - An official CKEditor 5 rich text editor component for Vue.
vue-froala-wysiwyg $ Non-Free - Vue component for Froala WYSIWYG HTML Rich Text Editor.
vue-html5-editor - An html5 wysiwyg editor for Vue.
vue-mobiledoc-editor - A mobiledoc editor component toolkit for Vue.
vue-wysiwyg - A lightweight WYSIWYG editor for Vue.
vue-ckeditor5 - CKEditor 5 for Vue.
Vue2Editor - A text editor using Vue and Quill.
tinymce-vue - official TinyMCE wrapper for Vue.
vue-trix - Simple and lightweight Trix editor component for Vue.
Everright-formEditor - A visual low code form editor based on vue3. It can create forms with simple operations through the GUI interface. It has a flexible interaction. The PC depends on element-plus while the mobile depends on vant. There is a set of adapters to convert parameters into ones that can be recognized by both element-plus and vant.
For Ruby
Editors for your Ruby-based project.bootstrap-wysihtml5-rails - WYSIWYG editor for Bootstrap, integrated in Ruby on Rails assets pipeline.
bootsy - A beautiful wysiwyg editor with image upload for Rails.
ckeditor - Ckeditor integration gem for rails.
Mercury Editor - Mercury Editor: The Rails HTML5 WYSIWYG editor.
wysiwyg-rails $ Non-Free - Ruby gem for Froala jQuery WYSIWYG HTML Rich Text Editor.
WYSIWYG-alike
WYSIWYG-alike editorsEmojiOne Area - WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery.
GrapesJS - An open-source, multi-purpose, Web Builder Framework.
last-draft - A Draft.js editor using draft-js-plugins.
Ory editor - Next-gen, highly customizable content editor for the browser - based on React and Redux. WYSIWYG on steroids.
prosemirror - The ProseMirror WYSIWYM editor.
rich-textarea - A textarea component for React to colorize, highlight, decorate texts and offer autocomplete.
Sir Trevor - Rich content editing entirely re-imagined for the web.
woofmark - A modular, progressive, and beautiful Markdown and HTML editor.
ngx-wall - Extensible component based editor with fancy drag-and-drop experience
المشاركات
