; }; export default EngineDemo; ``` ### 插件引入 `@aomao/plugin-bold` 加粗插件 ```tsx import Bold from '@aomao/plugin-bold'; ``` 把 `Bold` 插件加入引擎 ```tsx //实例化引擎 const engine = new Engine(ref.current, { plugin: [Bold], }); ``` ### 卡片卡片是编辑器中单独划分的一个区域，其 UI 以及逻辑在卡片内部可以使用 React、Vue 或其它前端库自定义渲染内容，最后再挂载到编辑器上。引入 `@aomao/plugin-codeblock` 代码块插件，这个插件的 `语言下拉框` 使用 `React` 渲染，所以有区分。 `Vue3` 使用 `@aomao/plugin-codeblock-vue` ```tsx import CodeBlock, { CodeBlockComponent } from '@aomao/plugin-codeblock'; ``` 把 `CodeBlock` 插件和 `CodeBlockComponent` 卡片组件加入引擎 ```tsx //实例化引擎 const engine = new Engine(ref.current, { plugins: [CodeBlock], cards: [CodeBlockComponent], }); ``` `CodeBlock` 插件默认支持 `markdown`，在编辑器一行开头位置输入代码块语法` ```javascript ` 回车后即可触发。 ### 工具栏引入 `@aomao/toolbar` 工具栏，工具栏由于交互复杂，基本上都是使用 `React` + `Antd` UI 组件渲染，`Vue3` 使用 `@aomao/toolbar-vue` 工具栏除了 UI 交互外，大部分工作只是对不同的按钮事件触发后调用了引擎执行对应的插件命令，在需求比较复杂或需要重新定制 UI 的情况下，Fork 后修改起来也比较容易。 ```tsx import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@aomao/toolbar'; ``` 把 `ToolbarPlugin` 插件和 `ToolbarComponent` 卡片组件加入引擎，它可以让我们在编辑器中可以使用快捷键 `/` 唤醒出卡片工具栏 ```tsx //实例化引擎 const engine = new Engine(ref.current, { plugins: [ToolbarPlugin], cards: [ToolbarComponent], }); ``` 渲染工具栏，工具栏已配置好所有插件，这里我们只需要传入插件名称即可 ```tsx return ( ... { engine && ( ) } ... ) ``` 更复杂的工具栏配置请查看文档 [https://editor.aomao.com/zh-CN/config/toolbar](https://editor.aomao.com/zh-CN/config/toolbar) ### 协同编辑协同编辑基于 [ShareDB](https://github.com/share/sharedb) 开源库实现，比较陌生的朋友可以先了解它。 #### 交互模式每位编辑者作为 [客户端](https://github.com/itellyou-com/am-editor/tree/master/examples/react/components/editor/ot/client.ts) 通过 `WebSocket` 与 [服务端](https://github.com/itellyou-com/am-editor/tree/master/ot-server) 通信交换由编辑器生成的 `json0` 格式的数据。服务端会保留一份 `json` 格式的 `html` 结构数据，接收到来自客户端的指令后，再去修改这份数据，最后再转发到每个客户端。在启用协同编辑前，我们需要配置好 [客户端](https://github.com/itellyou-com/am-editor/tree/master/examples/react/components/editor/ot/client.ts) 和 [服务端](https://github.com/itellyou-com/am-editor/tree/master/ot-server) 服务端是 `NodeJs` 环境，使用 `express` + `WebSocket` 搭建的网络服务。 #### 案例案例中我们已经一份比较基础的客户端代码 [查看 React 完整案例](https://github.com/itellyou-com/am-editor/tree/master/examples/react) [查看 Vue3 完整案例](https://github.com/itellyou-com/am-editor/tree/master/examples/vue) ```tsx //实例化协作编辑客户端，传入当前编辑器引擎实例 const otClient = new OTClient(engine); //连接到协作服务端，`demo` 与服务端文档ID相同 otClient.connect( `ws://127.0.0.1:8080${currentMember ? '?uid=' + currentMember.id : ''}`, 'demo', ); ``` ### 项目图标 [Iconfont](https://at.alicdn.com/t/project/1456030/91ee9824-8591-463d-ad0b-6f26044781f6.html?spm=a313x.7781069.1998910419.63) ## 开发 ### React 需要在 `根目录` `site-ssr` `ot-server` 中分别安装依赖 ```base //依赖安装好后，只需要在根目录执行以下命令 yarn ssr ``` 启动后访问 localhost:7001 ### Vue 只需要进入 examples/vue 目录安装依赖 ```base //依赖安装好后，在 examples/vue 目录执行以下命令 yarn serve ``` 在 Vue 运行环境中，默认是安装的已发布到 npm 上的代码。如果需要修改引擎或者插件的代码后立即看到效果，我们需要做以下步骤： - 删除 examples/vue/node_modules/@aomao 文件夹 - 删除 examples/vue/node_modules/vue 文件夹。因为有插件依赖了 Vue，所以 Vue 的包会在项目根目录中安装。如果不删除 examples/vue 中的 Vue 包，和插件的 Vue 包不在一个环境中，就无法加载插件 - 在 am-editor 根目录下执行安装所有依赖命令，例如：`yarn` - 最后在 examples/vue 中重新启动 ## 贡献感谢 [Nirongxu](https://github.com/Nirongxu) 的捐赠 ### 支付宝 ![alipay](https://cdn-object.aomao.com/contribution/alipay.png?x-oss-process=image/resize,w_200) ### 微信支付 ![wechat](https://cdn-object.aomao.com/contribution/weichat.png?x-oss-process=image/resize,w_200) ### PayPal [https://paypal.me/aomaocom](https://paypal.me/aomaocom)