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 启发的富文本编辑器.
- React-RTE - 类似于 CKEditor 或 TinyMCE 的全功能文本区域替换.
- Facebook Notes Clone(ish) - 类似于 Facebook 笔记的富文本编辑器.
- Megadraft - 一个富文本编辑器，具有很好的默认插件和可扩展性.
- Medium Draft - 类似中型的富文本编辑器，侧重于键盘快捷键.
- React-Draft-Wyiswyg - 所见即所得的编辑器，具有各种文本编辑选项和相应的 HTML 生成.
- Dante 2 - 只是另一个建立在 DraftJs 之上的 Medium 克隆.
- Last Draft - 使用 Draft.js 插件构建的草稿编辑器.
- Z-Editor - 在线 Z 符号编辑器.
- Draftail - 基于 Draft.js 的可配置富文本编辑器，专为 Wagtail 构建.
- Braft - 可扩展的 Draft 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 - 使用 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 已放弃该作品的所有版权和相关或邻接权.