Editor Awesome

约 4 分钟阅读

标签：资源精选

Web Editor

推荐👍 Lexical, Tiptap, QuillJS
React 优先建议选择 Lexical，否则考虑 tiptap/prosemirror

prosemirror
- 实现 Editor 的基础库
tiptap
Hufe921/canvas-editor
- MIT, TS
- hufe.club/canvas-editor-docs/guide/schema.html
React
slab/quill
- BSD-3, TS
- Quill is a modern WYSIWYG editor built for compatibility and extensibility.
- zenoamaro/react-quill
  - npm
- gtgalone/react-quilljs
  - npm
  - 建议拷贝出来用，就一个 hook
tinymce/tinymce
- GPLv2
- The world's most popular JavaScript library for rich text editing
- What happened to TinyMCE's license? #9453
  - TinyMCE v7 变更为 GPLv2
  - MIT -> GPLv2
  - hugemce/hugemce
- CKEditor -> TinyMCE
  - 以前的迁移方向，现在 TinyMCE 也是 GPLv2 了
  - CKEditor license 问题
ckeditor/ckeditor5
- GPLv2, JS
- ckeditor.com
JefMari/awesome-wysiwyg
sofish/pen
- enjoy live editing (+markdown)
benjamn/kix-standalone
- google doc editor - 2010 - archived
red-axe/am-editor
- 富文本实时协同编辑器框架
Video
- redotvideo/revideo
- motion-canvas/motion-canvas

Collaborative

主要功能
- Text Editor / CRDT
- Comment
- Presence
- Room

yjs
automerge
partykit/partykit
- MIT, TS
- simplifies developing multiplayer applications
- hosting platform for globally distributed, stateful, on-demand, programmable web servers
liveblocks/liveblocks
- Apache-2.0, TS
- 只是客户端，不能 SelfHost #682

Image Editor

steffest/DPaint-js

Media

layerhub-io/react-design-editor
- MIT, TS, React
- Image, Presentation and Video editor. React design editor using fabric.js. Canva clone
bharathreddyza/react-design-editor

Code Editor

monaco
codemirror
- adoption
- We are rewriting CodeMirror
satya164/react-simple-code-editor
- works by overlaying a syntax highlighted <pre> block over a <textarea>
- 限制
  - 必须字体相同
  - undo 栈与浏览器不一致 - 大部分编辑器都有这样的问题
  - 没有针对性能优化 - 大文档会慢
Comparison of JavaScript-based source code editors

Flow Editor

stately.ai/registry/new
- XState

Markdown

outline/rich-markdown-editor
- Outline Prosemirror 编辑器
- 支持 / 命令
- 类 block 编辑器
Tencent/cherry-markdown
bytedance/bytemd
- Svelte
- 提供 React, Vue
Milkdown/milkdown
- MIT, TS, React
- prosemirror+remark
panphora/overtype
- MIT, JS
- markdown editor that's just a textarea
HyperMD
- CodeMirror
TUI Editor
EasyMDE
- CodeMirror

Hex

Block

Builder

Page Builder
Report Builder
Form Builder
Component Builder
难点
- 状态管理
- 序列化
- 框架集成
- 数据接入

premieroctet/openchakra
plasmicapp/plasmic
- MIT, TS
BuilderIO/mitosis
- MIT, TS
- React, Vue, Qwik, Solid, Angular, Svelte
prevwong/reka.js
- MIT, TS
- State management system to build any no-code editor
prevwong/craft.js
- React
react-page/react-page Next-gen, highly customizable content editor for the browser - based on React and Redux. WYSIWYG on steroids.
- MIT, TypeScript+React
- 整页编辑
- 耦合 mui
alibaba/designable
tinacms
measuredco/puck
- MIT, React

商业

codyhouse.co
builderio

IDE/Code

Misc

Prototyping

Prototype 场景
- 2D 像素纬度 - 输出 SVG 或设计稿 - 实现相对简单
  - 类似 PS，SVG 编辑器
- Low Code - 部分控制
- HTML - CMS
  - 编排 HTML 元素，所见即所得 - 需要处理复杂布局逻辑
  - 编辑组件、绑定数据 - 交互复杂

React-Proto/react-proto
openclipart.org
- Public Domain
akiraux/Akira
- Vala
- Native Linux App for UI and UX Design built in Vala and GTK
react-studio

View

mac-s-g/react-json-view

Flow / NodeEditor

react-flow
retejs/rete
- MIT
- modular framework for visual programming
DrawIO
BPMN.js

Game/Studio

raverie-us/raverie-engine
- C++, WASM
- aims to recreate the Macromedia/Adobe Flash experience of old
- raverie-us.github.io/raverie-engine
editor.godotengine.org

Model/Spec/Schema

设计/扩展 RichText Editor 的核心是理解文档模型

Glossary

MIS - 管理信息系统
- 大多为 Table+Form

关联信息

反向链接、本文链接的其他页面和外部资料。

反向链接

编辑器
笔记 · Awesome
基于 Web 的编辑器分为几个层次 · 增强 textarea - 例如 mention · 基于 contentEditbale - 富文本编辑器 - WYSIWYG - 所见即所得 · 直接实现编辑功能 · core+render · Block Editor

站内链接

Draftjs
笔记 · draft.js
新项目不再建议使用，使用 lexical · facebook/draft-js · 特点 · 原生 React · Facebook 开源使用 · 基于 contentEditable · 支持自定义组件 · 样式是预定义映射为 css style
editor.js
笔记 · codex-team/editor.js
codex-team/editor.js · Apache-2.0, TS · Block 编辑器 · 插件非常多，生态比较好 · ⚠️ 基础功能薄弱，基本的功能也得使用插件 · editorjs-undo, editorjs-drag-drop
Low Code Design
笔记 · Low Code Design
Low Code - 讲究编辑，关联，任意组件 · 组件的特性 · 配置化 · Schema化 · 可以参考设计，只实现配置化 · 模型 · ProseMirror 的 Schema 模型值得借鉴参考 · HTML/JSX - type/tag, attributes, children
monaco
笔记 · monaco
Microsoft/monaco-editor · 参考 · monaco-editor README · TsxEditor.tsx · TsxEditor · CDN: monaco-editor · suren-atoyan/monaco-react
plate
笔记 · udecode/plate
udecode/plate · -> Slate+shadcn+tailwindcss+radix
ProseMirror
笔记 · prosemirror
prosemirror · low-level rte toolkit · 特性 · 结构化的模型树 · 模型不可变 · 支持协作编辑 · 模型受 schema 限制 - 实现自定义 · 解析自动化 - 但可能丢弃 schema 之外信息 · 模型状态变化类似于 redux
Slate
笔记 · slatejs
ianstormtaylor/slate · 文档 · slate 84kb + immer · slate-react 59kb - +slate 145kb · 特性 · 原生 react · 自定义 render · 没有固定的文档模型 - 基于接口 - POJO - 可以直接序列化
tiptap
笔记 · tiptap
ueberdosis/tiptap · MIT, Typescript · Headlees，框架无关的编辑器 · 基于 ProseMirror · 支持协作编辑 - y.js · Pro 提供部分额外扩展 - emoji, details

参考资料

GitHub63 条

akiraux/Akiragithub.com/akiraux/Akira
alibaba/designablegithub.com/alibaba/designable
appleple/smartblockgithub.com/appleple/smartblock
Automattic/isolated-block-editorgithub.com/Automattic/isolated-block-editor
benjamn/kix-standalonegithub.com/benjamn/kix-standalone
bharathreddyza/react-design-editorgithub.com/bharathreddyza/react-design-editor
BuilderIO/mitosisgithub.com/BuilderIO/mitosis
bytedance/bytemdgithub.com/bytedance/bytemd
ckeditor/ckeditor5github.com/ckeditor/ckeditor5
Darginec05/Yoopta-Editorgithub.com/Darginec05/Yoopta-Editor
DTStack/moleculegithub.com/DTStack/molecule
editablejs/editablegithub.com/editablejs/editable
editor-js/awesome-editorjsgithub.com/editor-js/awesome-editorjs
editor-js/document-modelgithub.com/editor-js/document-model
ekzhang/rustpadgithub.com/ekzhang/rustpad
facebook/lexicalgithub.com/facebook/lexical
gtgalone/react-quilljsgithub.com/gtgalone/react-quilljs
Hufe921/canvas-editorgithub.com/Hufe921/canvas-editor
hugemce/hugemcegithub.com/hugemce/hugemce
JefMari/awesome-wysiwyggithub.com/JefMari/awesome-wysiwyg
jpuri/react-draft-wysiwyggithub.com/jpuri/react-draft-wysiwyg
layerhub-io/react-design-editorgithub.com/layerhub-io/react-design-editor
liveblocks/liveblocksgithub.com/liveblocks/liveblocks
liveblocks/liveblocks#682github.com/liveblocks/liveblocks/issues/682
lovasoa/react-contenteditablegithub.com/lovasoa/react-contenteditable
lukecav/awesome-blocksgithub.com/lukecav/awesome-blocks
mac-s-g/react-json-viewgithub.com/mac-s-g/react-json-view
measuredco/puckgithub.com/measuredco/puck
Milkdown/milkdowngithub.com/Milkdown/milkdown
motion-canvas/motion-canvasgithub.com/motion-canvas/motion-canvas
outline/rich-markdown-editorgithub.com/outline/rich-markdown-editor
ozanyurtsever/verbumgithub.com/ozanyurtsever/verbum
panphora/overtypegithub.com/panphora/overtype
partykit/partykitgithub.com/partykit/partykit
plasmicapp/plasmicgithub.com/plasmicapp/plasmic
portabletext/portabletextgithub.com/portabletext/portabletext
premieroctet/openchakragithub.com/premieroctet/openchakra
prevwong/craft.jsgithub.com/prevwong/craft.js
prevwong/reka.jsgithub.com/prevwong/reka.js
ProseMirror/prosemirror-modelgithub.com/ProseMirror/prosemirror-model
raverie-us/raverie-enginegithub.com/raverie-us/raverie-engine
react-page/react-pagegithub.com/react-page/react-page
React-Proto/react-protogithub.com/React-Proto/react-proto
red-axe/am-editorgithub.com/red-axe/am-editor
redotvideo/revideogithub.com/redotvideo/revideo
retejs/retegithub.com/retejs/rete
satya164/react-simple-code-editorgithub.com/satya164/react-simple-code-editor
slab/quillgithub.com/slab/quill
sofish/pengithub.com/sofish/pen
sstur/react-rtegithub.com/sstur/react-rte
steffest/DPaint-jsgithub.com/steffest/DPaint-js
Tencent/cherry-markdowngithub.com/Tencent/cherry-markdown
tinymce/tinymcegithub.com/tinymce/tinymce
tinymce/tinymce#9453github.com/tinymce/tinymce/issues/9453
tobi4120/notion-clonegithub.com/tobi4120/notion-clone
TryGhost/Admin/lib/koenig-editorgithub.com/TryGhost/Admin/tree/main/lib/koenig-editor
TypeCellOS/BlockNotegithub.com/TypeCellOS/BlockNote
uiwjs/react-md-editorgithub.com/uiwjs/react-md-editor
viebel/klipsegithub.com/viebel/klipse
wereturtle/ghostwritergithub.com/wereturtle/ghostwriter
WerWolv/ImHexgithub.com/WerWolv/ImHex
WordPress/gutenberggithub.com/WordPress/gutenberg
zenoamaro/react-quillgithub.com/zenoamaro/react-quill

Wikipedia1 条

Comparison of JavaScript-based source code editorsWikipedia:Comparison of JavaScript-based source code editors

Hacker News2 条

Hacker News #17858672HN #17858672
Hacker News #31019778HN #31019778

其他外链17 条

avuejs.comavuejs.com/
ckeditor.comckeditor.com/
codemirror.netcodemirror.net/
codemirror.net/5/doc/realworld.htmlcodemirror.net/5/doc/realworld.html
codyhouse.cocodyhouse.co/
developers.notion.com/reference/blockdevelopers.notion.com/reference/block
docs.slatejs.org/v/v0.47/guides/data-modeldocs.slatejs.org/v/v0.47/guides/data-model
editor.godotengine.orgeditor.godotengine.org/
gist.github.com/manigandham/65543a0bc2bf7006a487gist.github.com/manigandham/65543a0bc2bf7006a487
hexed.ithexed.it/
hufe.club/canvas-editor-docs/guide/schema.htmlhufe.club/canvas-editor-docs/guide/schema.html
open.feishu.cn/document/server-docs/docs/docs-overviewopen.feishu.cn/document/server-docs/docs/docs-overview
openclipart.orgopenclipart.org/
raverie-us.github.io/raverie-engineraverie-us.github.io/raverie-engine
stately.ai/registry/newstately.ai/registry/new
www.builder.io/c/docs/models-introwww.builder.io/c/docs/models-intro
www.notion.so/blog/data-model-behind-notionwww.notion.so/blog/data-model-behind-notion

最近更新2025年8月24日commit 13e7a74 编辑

Draftjs

Editor FAQ