update
This commit is contained in:
326
html/draftjs.md2.html
Normal file
326
html/draftjs.md2.html
Normal file
@@ -0,0 +1,326 @@
|
||||
<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 & 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 & 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&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&drop, resizing &
|
||||
tooltips.</li>
|
||||
<li><a href="https://github.com/AlastairTaft/draft-js-editor/">Draft.js
|
||||
Editor</a> - A Rich text editor inspired by Medium & 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 & 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 & 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 & 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 & 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
Block a user