Draft.js
Awesome Draft.js
¶
Draft.js 是一个用于在React中构建富文本编辑器的框架.
- Community
- Presentations
- Projects on Top of Draft.js
- Common Utilities
- Blog Posts & Articles
- Live Demos
- Usage in Production
- License
Community¶
Presentations¶
- Rich Text Editing with React @ React.js Conf 2016 by Isaac Salier-Hellendag
- Rich text editing with Draft.js & DraftJS Plugins by Nik Graf
- React Ep. 37: Draftjs by What I Learned Today – Atomic Jolt
- 008 - Draft.js Plugins @ React30
- Draft.js at HubSpot by Ben Briggs
- Draft.js under the hood - React Melbourne meetup
Standalone Editors Built on Draft.js¶
- Draft WYSIWYG -所见即所得的编辑器,具有拖放,调整大小和工具提示的功能.
- Draft.js Editor -受Medium和Facebook Notes启发的Rich Text编辑器.
- React-RTE -类似于CKEditor或TinyMCE的全功能textarea替换.
- Facebook Notes Clone(ish) -与Facebook笔记类似的富文本编辑器.
- Megadraft -具有丰富的默认插件和可扩展性的富文本编辑器.
- Medium Draft -中等风格的富文本编辑器,重点放在键盘快捷键上.
- React-Draft-Wyiswyg -WYISWYG编辑器,具有各种文本编辑选项和相应的HTML生成.
- Dante 2 -只是在DraftJs之上构建的另一个Medium克隆.
- Last Draft -使用Draft.js插件构建的草稿编辑器.
- Z-Editor -在线Z注释编辑器.
- Draftail -为Wagtail构建的基于Draft.js的可配置富文本编辑器.
- Braft -可扩展的JS草稿编辑器
Plugins and Decorators Built for Draft.js¶
- Draft.js Plugins -在Draft.js之上的插件架构
- Alignment
- Block Breakout -键入时突破块类型.
- Buttons
- Color Picker
- Counter -字符,单词和行计数.
- Divider
- Drag and Drop
- Embed
- Emoji -像松弛一样的表情符号支持
- EmojiPicker
- Focus
- GifPicker
- Hashtags -类似Twitter的主题标签支持
- Image
- Inline Toolbar
- Katex -使用Katex插入并渲染LaTeX.
- Link
- Linkify -自动将链接变成锚标记.
- List -自动创建列表,嵌套列表
- Markdown Shortcuts -Markdown语法快捷方式.
- Mathjax -使用Mathjax渲染的(La)TeX编辑数学.
- Mention -类似Twitter的提及支持
- Modal
- Prism -带有棱镜的语法高亮代码块.
- Resizeable
- RichButtons -添加和自定义丰富的格式按钮.
- Side Toolbar
- Sidebar
- Single Line -限制为单行输入.
- Sticker -类似Facebook的贴纸支持
- Toolbar
- Undo -撤消和重做按钮.
- Video
- Draft.js Gutter -称赞行号装订线.
- Draft.js Basic HTML Editor -接受html作为其输入格式,并将html返回到onChange.
- Draft.js Prism-使用Prism突出显示代码块.
- Draft.js Typeahead -支持预输入功能.
- Draft Extend -使用可配置的插件和集成的序列化构建可扩展的Draft.js编辑器.
- Draft.js Code -一组用于更佳代码编辑的低级实用程序
- Draft.js Annotatable -Draft.js的现成注释系统,支持用户创建的注释.
- Draft.js Regex -一组灵活的帮助程序,例如正则表达式,空白行防止和粘贴HTML清除.
Common Utilities¶
- Redraft -使用提供的回调渲染Draft.js convertToRaw的结果,与React配合良好
- Draft.js AST Importer-从随附的draft-js-ast-exporter导入抽象语法树(AST)输出.
- Draft.js Multidecorators -组合多个装饰器.
- Draft.js SimpleDecorator -轻松创建灵活的装饰器.
- DraftJS Utils -DraftJS的实用程序功能集.
- React Native Draft.js Render -用于Draft.js模型的React Native渲染.
- Sticky -一个简单的笔记和剪贴板管理桌面应用程序
Blog Posts & Articles¶
- Facebook open sources rich text editor framework Draft.js
- This Blog Post Was Written Using Draft.js
- How Draft.js Represents Rich Text Data
- A Beginner’s Guide to Draft.js
- Implementing todo list in Draft.js
- Draft.js Pieces
- Learning Draft.js -有关如何使用draft.js开发的系列博客文章
- Why Wagtail’s new editor is built with Draft.js
- Rethinking rich text pipelines with Draft.js
Live Demos¶
- Draft-js Samples - An app with examples and code explanations
- Draftail Playground – Wagtail的Draft.js依赖项作为独立演示.
- Draft drag and drop demo for mobile browser
Playgrounds for Examples from Official Repository (v.0.10.0)¶
- Rich Text Editor
- Color Editor
- Convert from HTML Editor
- Entity Editor
- Link Editor
- Media Editor
- Plain Text Editor
- Decorators Editor - Tweet example
Usage in Production¶
License¶
在法律允许的范围内, Nikolaus Graf 已放弃此作品的所有版权以及相关或邻近的权利.