rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
awesome-awesomeness/html/draftjs.md2.html
rhetenor 652812eed0 update
2025-07-18 23:13:11 +02:00

327 lines
14 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 id="awesome-draft.js-awesome">Awesome Draft.js <a
href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></h1>
<p><a href="https://draftjs.org/">Draft.js</a> is a framework for
building rich text editors in React.</p>
<p><strong>Table of Contents</strong></p>
<ul>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#community">Community</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#presentations">Presentations</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#standalone-editors-built-on-draftjs">Projects
on Top of Draft.js</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#common-utilities">Common
Utilities</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#blog-posts--articles">Blog
Posts &amp; Articles</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#live-demos">Live
Demos</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#usage-in-production">Usage
in Production</a></li>
<li><a
href="https://github.com/nikgraf/awesome-draft-js#license">License</a></li>
</ul>
<h2 id="community">Community</h2>
<ul>
<li><a href="https://draftjs.herokuapp.com/">Slack channel</a></li>
</ul>
<h2 id="presentations">Presentations</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=feUYwoLhE_4">Rich Text
Editing with React @ React.js Conf 2016 by Isaac
Salier-Hellendag</a></li>
<li><a href="https://www.youtube.com/watch?v=gxNuHZXZMgs">Rich text
editing with Draft.js &amp; DraftJS Plugins by Nik Graf</a></li>
<li><a href="https://www.youtube.com/watch?v=0k9suXgCtTA">React Ep. 37:
Draftjs by What I Learned Today – Atomic Jolt</a></li>
<li><a href="https://www.youtube.com/watch?v=w-PqnpMizcQ">008 - Draft.js
Plugins @ React30</a></li>
<li><a
href="https://product.hubspot.com/blog/tech-talk-at-night-react-meetup">Draft.js
at HubSpot by Ben Briggs</a></li>
<li><a
href="https://www.youtube.com/watch?feature=player_embedded&amp;v=vOZAO3jFSHI">Draft.js
under the hood - React Melbourne meetup</a></li>
</ul>
<h2 id="standalone-editors-built-on-draft.js">Standalone Editors Built
on Draft.js</h2>
<ul>
<li><a href="https://github.com/bkniffler/draft-wysiwyg">Draft
WYSIWYG</a> - WYSIWYG editor that with drag&amp;drop, resizing &amp;
tooltips.</li>
<li><a href="https://github.com/AlastairTaft/draft-js-editor/">Draft.js
Editor</a> - A Rich text editor inspired by Medium &amp; Facebook
Notes.</li>
<li><a href="https://github.com/sstur/react-rte/">React-RTE</a> - A
full-featured textarea replacement similar to CKEditor or TinyMCE.</li>
<li><a href="https://github.com/andrewcoelho/react-text-editor">Facebook
Notes Clone(ish)</a> - Rich text editor similar to Facebook notes.</li>
<li><a href="https://github.com/globocom/megadraft">Megadraft</a> - A
rich text editor with a nice default base of plugins and
extensibility.</li>
<li><a href="https://github.com/brijeshb42/medium-draft">Medium
Draft</a> - Medium-like rich text editor with a focus on keyboard
shortcuts.</li>
<li><a
href="https://github.com/jpuri/react-draft-wysiwyg">React-Draft-Wyiswyg</a>
- A WYISWYG editor, with various text editing options and corresponding
HTML generation.</li>
<li><a href="https://github.com/michelson/dante2">Dante 2</a> - Just
another Medium clone built on top of DraftJs.</li>
<li><a href="https://github.com/vacenz/last-draft">Last Draft</a> - A
Draft editor built with Draft.js plugins.</li>
<li><a href="https://github.com/Z-Editor/Z-Editor">Z-Editor</a> - Online
Z-notations editor.</li>
<li><a href="https://github.com/springload/draftail/">Draftail</a> - A
configurable rich text editor based on Draft.js, built for Wagtail.</li>
<li><a href="https://github.com/margox/braft-editor">Braft</a> -
Extensible Draft JS Editor</li>
</ul>
<h2 id="plugins-and-decorators-built-for-draft.js">Plugins and
Decorators Built for Draft.js</h2>
<ul>
<li><a
href="https://github.com/draft-js-plugins/draft-js-plugins">Draft.js
Plugins</a> - A Plugin architecture on top of Draft.js
<ul>
<li><a
href="https://www.draft-js-plugins.com/plugin/alignment">Alignment</a></li>
<li><a
href="https://github.com/icelab/draft-js-block-breakout-plugin">Block
Breakout</a> - Break out of block types as you type.</li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Buttons</a></li>
<li><a href="https://github.com/vacenz/last-draft-js-plugins">Color
Picker</a></li>
<li><a
href="https://www.draft-js-plugins.com/plugin/counter">Counter</a> -
Character, word &amp; line counting.</li>
<li><a
href="https://github.com/simsim0709/draft-js-plugins/tree/master/draft-js-divider-plugin">Divider</a></li>
<li><a href="https://www.draft-js-plugins.com/plugin/drag-n-drop">Drag
and Drop</a></li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Embed</a></li>
<li><a href="https://www.draft-js-plugins.com/plugin/emoji">Emoji</a> -
Slack-like emoji support</li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">EmojiPicker</a></li>
<li><a
href="https://www.draft-js-plugins.com/plugin/focus">Focus</a></li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">GifPicker</a></li>
<li><a
href="https://www.draft-js-plugins.com/plugin/hashtag">Hashtags</a> -
Twitter-like hashtag support</li>
<li><a
href="https://www.draft-js-plugins.com/plugin/image">Image</a></li>
<li><a
href="https://www.draft-js-plugins.com/plugin/inline-toolbar">Inline
Toolbar</a></li>
<li><a
href="https://github.com/letranloc/draft-js-katex-plugin">Katex</a> -
Insert and render LaTeX using Katex.</li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Link</a></li>
<li><a
href="https://www.draft-js-plugins.com/plugin/linkify">Linkify</a> -
Automatically turn links into anchor-tags.</li>
<li><a
href="https://github.com/samuelmeuli/draft-js-list-plugin">List</a> -
Automatic list creation, nested lists</li>
<li><a
href="https://github.com/ngs/draft-js-markdown-shortcuts-plugin/">Markdown
Shortcuts</a> - Markdown syntax shortcuts.</li>
<li><a
href="https://github.com/tarjei/draft-js-mathjax-plugin">Mathjax</a> -
Edit math using (La)TeX rendered by Mathjax.</li>
<li><a
href="https://www.draft-js-plugins.com/plugin/mention">Mention</a> -
Twitter-like mention support</li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Modal</a></li>
<li><a
href="https://github.com/withspectrum/draft-js-prism-plugin">Prism</a> -
Syntax highlight code blocks with Prism.</li>
<li><a
href="https://www.draft-js-plugins.com/plugin/resizeable">Resizeable</a></li>
<li><a
href="https://github.com/jasonphillips/draft-js-richbuttons-plugin">RichButtons</a>
- Add and customize rich formatting buttons.</li>
<li><a href="https://www.draft-js-plugins.com/plugin/side-toolbar">Side
Toolbar</a></li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Sidebar</a></li>
<li><a
href="https://github.com/icelab/draft-js-single-line-plugin">Single
Line</a> - Restrict to a single line of input.</li>
<li><a
href="https://www.draft-js-plugins.com/plugin/sticker">Sticker</a> -
Facebook-like sticker support</li>
<li><a
href="https://github.com/vacenz/last-draft-js-plugins">Toolbar</a></li>
<li><a href="https://www.draft-js-plugins.com/plugin/undo">Undo</a> -
Undo &amp; Redo button.</li>
<li><a
href="https://www.draft-js-plugins.com/plugin/video">Video</a></li>
</ul></li>
<li><a href="https://github.com/seejamescode/draft-js-gutter">Draft.js
Gutter</a> - Compliments line number gutter.</li>
<li><a
href="https://github.com/dburrows/draft-js-basic-html-editor">Draft.js
Basic HTML Editor</a> - Accept html as its input format, and return html
to an onChange.</li>
<li><a href="https://github.com/SamyPesse/draft-js-prism">Draft.js
Prism</a>- Highlight code blocks using Prism.</li>
<li><a href="https://github.com/dooly-ai/draft-js-typeahead">Draft.js
Typeahead</a> - Support for typeahead functionality.</li>
<li><a href="https://github.com/HubSpot/draft-extend">Draft Extend</a> -
Build extensible Draft.js editors with configurable plugins and
integrated serialization.</li>
<li><a href="https://github.com/SamyPesse/draft-js-code">Draft.js
Code</a> - A collection of low-level utilities for nicer code
editing</li>
<li><a href="https://github.com/cltk/annotations">Draft.js
Annotatable</a> - Out of the box annotation system for Draft.js with
support for user-created annotations.</li>
<li><a href="https://github.com/YozhikM/draft-regex">Draft.js Regex</a>
- The set of flexible helpers, like regex, blank lines preventing and
pasted HTML clearing.</li>
</ul>
<h2 id="common-utilities">Common Utilities</h2>
<ul>
<li><a href="https://github.com/evanc/backdraft-js">BackDraft.js</a> -
Function to turn a rawContentBlock into a marked-up string.</li>
<li><a href="https://github.com/rkpasia/draft-js-exporter">Draft.js
Exporter</a> - Export and format the content from Draft.js.</li>
<li><a
href="https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html">Draft.js:
Export ContentState to HTML</a> - Export ContentState to HTML.</li>
<li><a
href="https://github.com/datagenno/draft-js-export-pdfmake">Draft.js:
Export ContentState to PDFMake</a> - Export ContentState to
PDFMake.</li>
<li><a href="https://github.com/lokiuz/redraft">Redraft</a> - Renders
the result of Draft.js convertToRaw using provided callbacks, works well
with React</li>
<li><a href="https://github.com/ignitionworks/draftjs_exporter">Draft.js
exporter (Ruby)</a> - Export Draft.js content state into HTML.</li>
<li><a href="https://github.com/springload/draftjs_exporter">Draft.js
exporter (Python)</a> - Library to convert Draft.js raw ContentState to
HTML</li>
<li><a href="https://github.com/icelab/draft-js-ast-exporter">Draft.js
AST Exporter</a> - Export content into an abstract syntax tree
(AST).</li>
<li><a href="https://github.com/icelab/draft-js-ast-importer">Draft.js
AST Importer</a>- Import an abstract syntax tree (AST) output from the
companion draft-js-ast-exporter.</li>
<li><a
href="https://github.com/SamyPesse/draft-js-multidecorators">Draft.js
Multidecorators</a> - Combine multiple decorators.</li>
<li><a
href="https://github.com/Soreine/draft-js-simpledecorator">Draft.js
SimpleDecorator</a> - Easily create flexible decorators.</li>
<li><a href="https://github.com/jpuri/draftjs-utils">DraftJS Utils</a> -
Set of utility functions for DraftJS.</li>
<li><a href="https://github.com/jpuri/draftjs-to-html">DraftJs to
HTML</a> - Library for generating HTML for DraftJS editor content.</li>
<li><a href="https://github.com/HubSpot/draft-convert">Draft Convert</a>
- Extensibly serialize &amp; deserialize Draft.js ContentState with
HTML.</li>
<li><a href="https://github.com/jpuri/html-to-draftjs">HTML to
DraftJS</a> - Convert plain HTML to DraftJS Editor content.</li>
<li><a href="https://github.com/ejilay/draftjs">Draft.js Exporter
(Go)</a> - Export Draft.js content state into HTML.</li>
<li><a
href="https://github.com/globocom/react-native-draftjs-render">React
Native Draft.js Render</a> - A React Native render for Draft.js
model.</li>
<li><a href="https://github.com/thibaudcolas/draftjs-filters">Draft.js
filters</a> - Filter Draft.js content to preserve only the formatting
you allow.</li>
<li><a href="https://github.com/nadunindunil/sticky">Sticky</a> - A
simple note taking and clipboard managing desktop application</li>
</ul>
<h2 id="blog-posts-articles">Blog Posts &amp; Articles</h2>
<ul>
<li><a
href="https://code.facebook.com/posts/1684092755205505/facebook-open-sources-rich-text-editor-framework-draft-js/">Facebook
open sources rich text editor framework Draft.js</a></li>
<li><a
href="https://dev.to/ben/this-blog-post-was-written-using-draftjs">This
Blog Post Was Written Using Draft.js</a></li>
<li><a
href="https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#.7gd8psdvi">How
Draft.js Represents Rich Text Data</a></li>
<li><a
href="https://medium.com/@adrianli/a-beginner-s-guide-to-draft-js-d1823f58d8cc#.uufeulpl5">A
Beginner’s Guide to Draft.js</a></li>
<li><a
href="http://bitwiser.in/2016/08/31/implementing-todo-list-in-draft-js.html">Implementing
todo list in Draft.js</a></li>
<li><a
href="https://cannibalcoder.com/2016/12/02/draft-js-pieces/">Draft.js
Pieces</a></li>
<li><a href="https://reactrocket.com/series/learning-draft-js/">Learning
Draft.js</a> - Series of blog posts on how to develop with draft.js</li>
<li><a
href="https://wagtail.io/blog/why-wagtail-new-editor-is-built-with-draft-js/">Why
Wagtail’s new editor is built with Draft.js</a></li>
<li><a
href="https://wagtail.io/blog/rethinking-rich-text-pipelines-with-draft-js/">Rethinking
rich text pipelines with Draft.js</a></li>
</ul>
<h2 id="live-demos">Live Demos</h2>
<ul>
<li><a href="https://github.com/Mair/react-meetup-draftjs">Draft-js
Samples - An app with examples and code explanations</a></li>
<li><a href="https://draftail-playground.herokuapp.com/">Draftail
Playground</a> – Wagtail’s Draft.js dependencies as a standalone
demo.</li>
<li><a href="https://github.com/jan4984/draft-dnd-example">Draft drag
and drop demo for mobile browser</a></li>
</ul>
<h2
id="playgrounds-for-examples-from-official-repository-v.0.10.0">Playgrounds
for Examples from Official Repository (v.0.10.0)</h2>
<ul>
<li><a href="https://codepen.io/Kiwka/pen/YNYvyG">Rich Text
Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/oBpVve">Color Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/YNYgWa">Convert from HTML
Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/wgpOoZ">Entity Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/ZLvPeO">Link Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/rjpRzj">Media Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/jyYJzb">Plain Text
Editor</a></li>
<li><a href="https://codepen.io/Kiwka/pen/KaZERV">Decorators Editor -
Tweet example</a></li>
</ul>
<h2 id="usage-in-production">Usage in Production</h2>
<ul>
<li><a href="https://www.storychief.io/">StoryChief</a></li>
<li><a href="https://technosphere-magazine.hkw.de/">HKW Technosphere
Magazine</a></li>
<li><a href="https://read.douban.com/editor_ng">Douban Read</a></li>
<li><a href="https://www.dooly.ai">Dooly</a></li>
<li><a href="https://wagtail.io/">Wagtail</a></li>
<li><a href="https://www.patreon.com/">Patreon</a></li>
</ul>
<h2 id="license">License</h2>
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
alt="CC0" /></a></p>
<p>To the extent possible under law, <a
href="https://github.com/nikgraf/">Nikolaus Graf</a> has waived all
copyright and related or neighboring rights to this work.</p>
<p><a href="https://github.com/nikgraf/awesome-draft-js">draftjs.md
Github</a></p>
Reference in New Issue View Git Blame Copy Permalink