frontend-dev-bookmarks
Manually curated collection of resources for frontend web developers.
Rich Text Editors
Context: frontend-dev-bookmarks / User Interface Components
A rich text editor is the interface for editing rich text within web browsers. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
- Content Sanitizers: Rich text editors often produce unclean input when you copy & paste some content into them. Content sanitizers help you clean up the text.
- FilteredPaste.js: A jQuery plugin that filters any pasted input so that your application gets clean input, without any tags or attributes that you don’t want.
- Sanitize.js: Sanitize.js is a whitelist-based HTML sanitizer. Given a list of acceptable elements and attributes, Sanitize.js will remove all unacceptable HTML from a DOM node.
- html-janitor: Cleans up your markup and allows you to take control of your HTML. HTMLJanitor uses a defined whitelist to limit HTML it is given to a defined subset.
- Create.js: Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content
- Demarcate: demarcate.js lets you edit directly in a page and generate Markdown back from the HTML elements.
- Hallo: Hallo is the simplest web editor imaginable. Instead of cluttered forms or toolbars, you edit your web content as it is. Just you, your web design, and your content.
- Inspired by Medium: Medium.com has a great and simple rich text editor built in. This libraries try to clone its behavior.
- Medium.js: A tiny JavaScript library for making contenteditable beautiful (Like Medium’s editor)
- Pen: Rich text editor inspired by Medium and backed by Markdown.
- grande.js: A small Javascript library that implements features from Medium’s editing experience.
- medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
- Kajero: Interactive JavaScript notebooks with markdown support and clever graphing.
- MarkItUp: markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor.
- Mercury Editor: Mercury is a full featured HTML5 editor. It was built from the ground up to help your team get the most out of content editing in modern browsers.
- Quill: Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and open sourced by Salesforce.com.
- Scribe: A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults. Developed by The Guardian.
- Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor: The team behind the Guardian’s digital content management system talk about how and why they built and open sourced Scribe.
- Substance: Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing systems.
- Build your own editor with Substance: This article describes the philosophy behind Substance and how to get started.
- TextAngular: A Lightweight, Two-Way-Bound Angular.js Text-Editor.
- WYSIHTML5: wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
- Voog fork: wysihtml is an extended and less strict approach on xing/wysihtml5 open source rich text editor based on HTML5 technology. The code is completely library agnostic: No jQuery, Prototype or similar is required.
- WYSIHTML5 Enhanced: WYSIHTML5 Enhanced is a rich-text editor, based on the wonderful wysihtml5 editor, with a bit of help from Twitter Bootstrap, Font-Awesome, Jcrop and HTML5’s Drag & Drop and File API.
- bootstrap3-wysiwyg: Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
- X-editable: This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes.
License
This work is licensed under a Creative Commons Attribution 4.0 International License.
Please provide a link back to this repository. This is not necessary for GitHub forks.