[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/text-editing.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Text Editing **repo:** [dok/awesome-text-editing](https://github.com/dok/awesome-text-editing) **category:** [[front-end-development|Front-End Development]] **related:** [[javascript|Javascript]] --- # Awesome text editing [](https://github.com/sindresorhus/awesome) A curated collection of text editing libraries, services, and resources for the web. ## Rich-text editors using contenteditable * [Slate](https://github.com/ianstormtaylor/slate) - Rich text editor built on top of [React](/@harrisonqian/awesome/wiki/front-end-development/react) and Immutable * [TipTap](https://github.com/scrumpy/tiptap) - Rich text editor for [Vue.js](/@harrisonqian/awesome/wiki/front-end-development/vue-js) * [Trix](https://github.com/basecamp/trix) - Basecamp's rich text editor * [CKEditor](http://ckeditor.com/) - Started back in 2003. Has both iframe and inline style rich-text editing * [Squire](https://github.com/neilj/Squire) - [HTML5](/@harrisonqian/awesome/wiki/front-end-development/html5) rich text editor * [ProseMirror](http://prosemirror.net/) - From the maker of CodeMirror * [Scribe](https://github.com/guardian/scribe) - From the [Guardian](http://www.theguardian.com/) team * [Quill](http://quilljs.com/) - Quill is a free, open source WYSIWYG editor built for the modern web * [Summernote](http://summernote.org/) - Bootstrap dependent rich-text editor * [wysihtml](http://wysihtml.com/) - Made by Voog * [Etherpad](http://etherpad.org/) - Open Source online editor providing collaborative editing in really real-time * [TinyMCE](http://www.tinymce.com/) - Used by much of the wordpress and [drupal](/@harrisonqian/awesome/wiki/content-management-systems/drupal) community * [Medium.js](http://jakiestfu.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Medium.js/docs/) - Warning: Not actually used by [Medium](https://medium.com/) * [Textbox.IO](https://textbox.io/) - From the makers of TinyMCE * [Froala](https://www.froala.com/wysiwyg-editor) - A simple to use rich text editor, with mobile support, lots of examples, high performance and inline editing * [Redactor](http://imperavi.com/redactor/) - Advanced, clean and smooth, Redactor Rich Text Editor offers an excellent immersive user experience * [Ritzy](https://github.com/ritzyed/ritzy) - Collaborative web-based rich text editor * [Aloha Editor](http://www.alohaeditor.org/Content.Node/index.html) - Open Source browser based [html5](/@harrisonqian/awesome/wiki/front-end-development/html5) enabled rich text editor * [WYMeditor](http://www.wymeditor.org/) - Open Source XHTML editor focusing on semantic markup * [Dijit Editor](http://dojotoolkit.org/) - a Dojo-based rich text editor component * [YUI Rich Text Editor](http://yui.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/yui2/) - a Yahoo! rich text editor component * [KindEditor](https://github.com/kindsoft/kindeditor) - Open Source HTML editor * [Hallo](https://github.com/bergie/hallo) - Simple rich text editor (contentEditable) for [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) UI * [markitup](http://markitup.jaysalvat.com/home/) - universal markup [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) editor * [openwysiwyg](http://www.openwebware.com/) - Free cross-browser WYSIWYG editor * [tejQuery](http://jqueryte.com/) - Lightweight (19.5 KB) and very useful HTML editor * [Trumbowyg](http://alex-d.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Trumbowyg/) - light, translatable and customisable [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) plugin * [NicEdit](http://nicedit.com/) - Abandoned in 2012 * [jWYSIWYG](https://github.com/jwysiwyg/jwysiwyg) - WYSIWYG [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) Plugin * [Alloy](http://alloyeditor.com/) - a modern WYSIWYG editor built on top of CKEDITOR * [Draft.js](http://facebook.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/draft-js/) - a rich text editor framework for [React](/@harrisonqian/awesome/wiki/front-end-development/react) * [MediumEditor](https://github.com/yabwe/medium-editor) - A clone of medium.com inline editor toolbar. Uses contenteditable API to implement a rich text solution. ## Code editors * [Yace](https://solopov.dev/yace) - 1KB code editor for browser with plugins * [CodeJar](https://medv.io/codejar/) - CodeJar is a micro code editor for the browser * [CodeMirror](https://codemirror.net/) - CodeMirror is a versatile text editor implemented in [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) for the browser * [Ace](https://ace.c9.io/#nav=about) - Ace is an embeddable code editor written in [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) * [EditArea](http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html) * [Behave.js](http://jakiestfu.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Behave.js/) - lightweight library for adding IDE style behaviors to plain text areas ## Markdown editors * [markdown-js](https://github.com/evilstreak/markdown-js) - A [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) parser for [javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript) * [pagedown](https://code.google.com/p/pagedown/wiki/PageDown) - PageDown is the [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) [Markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) previewer used on Stack Overflow and the [rest](/@harrisonqian/awesome/wiki/miscellaneous/rest) of the Stack Exchange network ## Heuristic for contenteditable rich-text editors Editor should: * Be stable * Be open source * Handle soft breaks * Be able to manipulate styles on block level elements * Be able to manipulate styles on inline level elements * Be able to manipulate classes on block level elements * Be able to manipulate classes on inline level elements * Be able to alter custom attributes on block level elements * Be able to alter custom attributes on inline level elements * Cache the selection * Have iframing capabilities as well as inline mode capability * Change the tag type of nodes * Clear the format * Have a concise api * Support various module loaders * AMD & Common.js * Should have an organization backing the service and have a potential paid support plan * Should copy & paste from Microsoft word ## License [](http://creativecommons.org/publicdomain/zero/1.0/)