Courses & Tutorials

Awesome Text Editing – Massive Collection of Resources

A curated collection of text editing libraries, services, and resources for the web.

Rich-text editors using contenteditable

  • Slate – Rich text editor built on top of React and Immutable
  • TipTap – Rich text editor for Vue.js
  • Trix – Basecamp’s rich text editor
  • CKEditor – Started back in 2003. Has both iframe and inline style rich-text editing
  • Squire – HTML5 rich text editor
  • ProseMirror – From the maker of CodeMirror
  • Scribe – From the Guardian team
  • Quill – Quill is a free, open source WYSIWYG editor built for the modern web
  • Summernote – Bootstrap dependent rich-text editor
  • wysihtml – Made by Voog
  • Etherpad – Open Source online editor providing collaborative editing in really real-time
  • TinyMCE – Used by much of the wordpress and drupal community
  • Medium.js – Warning: Not actually used by Medium
  • Textbox.IO – From the makers of TinyMCE
  • Froala – A simple to use rich text editor, with mobile support, lots of examples, high performance and inline editing
  • Redactor – Advanced, clean and smooth, Redactor Rich Text Editor offers an excellent immersive user experience
  • Ritzy – Collaborative web-based rich text editor
  • Aloha Editor – Open Source browser based html5 enabled rich text editor
  • WYMeditor – Open Source XHTML editor focusing on semantic markup
  • Dijit Editor – a Dojo-based rich text editor component
  • YUI Rich Text Editor – a Yahoo! rich text editor component
  • KindEditor – Open Source HTML editor
  • Hallo – Simple rich text editor (contentEditable) for jQuery UI
  • markitup – universal markup jQuery editor
  • openwysiwyg – Free cross-browser WYSIWYG editor
  • tejQuery – Lightweight (19.5 KB) and very useful HTML editor
  • Trumbowyg – light, translatable and customisable jQuery plugin
  • NicEdit – Abandoned in 2012
  • jWYSIWYG – WYSIWYG jQuery Plugin
  • Alloy – a modern WYSIWYG editor built on top of CKEDITOR
  • Draft.js – a rich text editor framework for React
  • MediumEditor – A clone of medium.com inline editor toolbar. Uses contenteditable API to implement a rich text solution.

Code editors

  • CodeJar – CodeJar is a micro code editor for the browser
  • CodeMirror – CodeMirror is a versatile text editor implemented in JavaScript for the browser
  • Ace – Ace is an embeddable code editor written in JavaScript
  • EditArea
  • Behave.js – lightweight library for adding IDE style behaviors to plain text areas

Markdown editors

  • markdown-js – A Markdown parser for javascript
  • pagedown – PageDown is the JavaScript Markdown previewer used on Stack Overflow and the 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

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button