Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baskinwind/zebra-editor-core
一款强大、现代的可视化编辑器。
https://github.com/baskinwind/zebra-editor-core
rich-editor typescript
Last synced: 7 days ago
JSON representation
一款强大、现代的可视化编辑器。
- Host: GitHub
- URL: https://github.com/baskinwind/zebra-editor-core
- Owner: baskinwind
- License: mit
- Created: 2020-05-14T06:00:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-16T13:16:42.000Z (11 months ago)
- Last Synced: 2024-11-02T00:02:53.209Z (about 1 month ago)
- Topics: rich-editor, typescript
- Language: TypeScript
- Homepage: https://zebrastudio.tech
- Size: 1.64 MB
- Stars: 244
- Watchers: 6
- Forks: 18
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - zebra-editor-core
README
# ZebraEditorCore
ZebraEditorCore 是[斑码编辑器](https://zebrastudio.tech)剔除 `UI` 框架，纯粹的富文本编辑器，该项目将焦点关注于编辑器最为关键的部分！
## 使用
```
yarn add zebra-editor-core
# or
npm i zebra-editor-core
```
```
import { mount } from "zebra-editor-core"
mount('root');
```
## 为什么？
目前，市面上流行的富文本编辑器主要有三大类：
1. `Markdown` 编辑器：结构清晰，但功能有限，比如不能给文字加颜色，设置段落的样式等等。
2. 基于 `contenteditable` 的 `Html` 富文本编辑器，如 `CKEditor` 。功能强大，但不受控，生成的 `Html` 过于混乱，掌控不了文章内容，虽能获取 `Html`，但却控制不了 `Html` 的结构，不能直接生成非 `Html` 结构，局限性很大，只能做 `Html` 相关的操作，却掌控不了文章的内容。
3. 基于 `contenteditable` 的 `JS` 富文本编辑器，与第二类的区别主要在于：文章结构保存在 `JS` 中，`Html` 是文章结构的映射，所有的编辑行为实际操作的是 `JS` 内存中的模型，如 `DraftJs` ，但是目前这类的编辑器，功能简单，可操作性不够。
该项目为第三类的富文本编辑器，相较于其他第三类富文本编辑器，它功能丰富，理论上支持所有 `Css` 属性，支持 `Markdown` 中所有的类型，包括但不限于 标题、表格、列表、引用、图片等，同时表格、列表、支持多层级嵌套，内容由 `JS` 表示，很容易就能生成别的类型：如 `Markdown`。