am-editor

一个富文本协同编辑器框架，可以使用React和Vue自定义插件

使用浏览器提供的 contenteditable 属性让一个 DOM 节点具有可编辑能力。

引擎接管了浏览器大部分光标、事件等默认行为。

可编辑器区域内的节点通过 schema 规则，制定了 mark inline block card 4 种组合节点，他们由不同的属性、样式或 html 结构组成，并对它们的嵌套进行了一定的约束。

通过 MutationObserver 监听编辑区域内的 DOM 树的改变，并生成 json0 类型的数据格式与 ShareDB 库进行交互，从而达到协同编辑的需要。

特性

- 开箱即用，提供几十种丰富的插件来满足大部分需求
- 高扩展性，除了 mark inline block 类型基础插件外，我们还提供 card 组件结合React Vue等前端库渲染插件 UI
- 丰富的多媒体支持，不仅支持图片和音视频，更支持插入嵌入式多媒体内容
- 支持 Markdown 语法
- 支持国际化
- 引擎纯 JavaScript 编写，不依赖任何前端库，插件可以使用 React Vue 等前端库渲染。复杂架构轻松应对
- 内置协同编辑方案，轻量配置即可使用
- 兼容大部分最新移动端浏览器

插件

| 包 | 版本 | 大小 | 描述 |
| :-------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------- |
| @ctoweb/toolbar |  |  | 工具栏, 适用于 React |
| @ctoweb/toolbar-vue |  |  | 工具栏, 适用于 Vue3 |
| @ctoweb/plugin-alignment |  |  | 对齐方式 |
| @ctoweb/plugin-backcolor |  |  | 背景色 |
| @ctoweb/plugin-bold |  |  | 加粗 |
| @ctoweb/plugin-code |  |  | 行内代码 |
| @ctoweb/plugin-codeblock |  |  | 代码块, 适用于 React |
| @ctoweb/plugin-codeblock-vue |  |  | 代码块, 适用于 Vue3 |
| @ctoweb/plugin-fontcolor |  |  | 前景色 |
| @ctoweb/plugin-fontfamily |  |  | 字体 |
| @ctoweb/plugin-fontsize |  |  | 字体大小 |
| @ctoweb/plugin-heading |  |  | 标题 |
| @ctoweb/plugin-hr |  |  | 分割线 |
| @ctoweb/plugin-indent |  |  | 缩进 |
| @ctoweb/plugin-italic |  |  | 斜体 |
| @ctoweb/plugin-link |  |  | 链接, 适用于 React |
| @ctoweb/plugin-link-vue |  |  | 链接, 适用于 Vue3 |
| @ctoweb/plugin-line-height |  |  | 行高 |
| @ctoweb/plugin-mark |  |  | 标记 |
| @ctoweb/plugin-mention |  |  | 提及 |
| @ctoweb/plugin-orderedlist |  |  | 有序列表 |
| @ctoweb/plugin-paintformat |  |  | 格式刷 |
| @ctoweb/plugin-quote |  |  | 引用块 |
| @ctoweb/plugin-redo |  |  | 重做 |
| @ctoweb/plugin-removeformat |  |  | 移除样式 |
| @ctoweb/plugin-selectall |  |  | 全选 |
| @ctoweb/plugin-status |  |  | 状态 |
| @ctoweb/plugin-strikethrough |  |  | 删除线 |
| @ctoweb/plugin-sub |  |  | 下标 |
| @ctoweb/plugin-sup |  |  | 上标 |
| @ctoweb/plugin-tasklist |  |  | 任务列表 |
| @ctoweb/plugin-underline |  |  | 下划线 |
| @ctoweb/plugin-undo |  |  | 撤销 |
| @ctoweb/plugin-unorderedlist |  |  | 无序列表 |
| @ctoweb/plugin-image |  |  | 图片 |
| @ctoweb/plugin-table |  |  | 表格 |
| @ctoweb/plugin-file |  |  | 文件 |
| @ctoweb/plugin-mark-range |  |  | 标记光标, 例如: 批注. |
| @ctoweb/plugin-math |  |  | 数学公式 |
| @ctoweb/plugin-video |  |  | 视频 |

快速上手

$3

编辑器由 引擎、工具栏、插件 组成。引擎 为我们提供了核心的编辑能力。

使用 npm 或者 yarn 安装引擎包

``bash
$ npm install @ctoweb/engine

or

$ yarn add @ctoweb/engine
`

$3

我们按照惯例先输出一个Hello word!

`tsx
import React, { useEffect, useRef, useState } from 'react';
import Engine, { EngineInterface } from '@ctoweb/engine';

const EngineDemo = () => {
//编辑器容器
const ref = useRef(null);
//引擎实例
const [engine, setEngine] = useState();
//编辑器内容
const [content, setContent] = useState('

Hello word!

');

useEffect(() => {
if (!ref.current) return;
//实例化引擎
const engine = new Engine(ref.current);
//设置编辑器值
engine.setValue(content);
//监听编辑器值改变事件
engine.on('change', () => {
const value = engine.getValue();
setContent(value);
console.log(value:${value});
});
//设置引擎实例
setEngine(engine);
}, []);

return