npm package: @hanfy/engine
Description: <p align="center"> 	一个支持协同编辑的富文本编辑器，可以自由的使用React、Vue 等前端常用库扩展定义插件。 </p>
Author: me@hanfy.com
Latest version: 2.10.34




<p align="center">
	一个支持协同编辑的富文本编辑器，可以自由的使用React、Vue 等前端常用库扩展定义插件。
</p>


![aomao-preview](https://img-blog.csdnimg.cn/img_convert/2d439cbb4084a291469faec29fc8837b.png)


## 特性

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

## 插件

| **包**                                                                                                |                                                                                                                                                                                **版本** |                                                                                                                                                                           **大小** | **描述**               |
| :---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------- |
| [`@hanfy/toolbar`](./packages/toolbar)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Ftoolbar.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-WAboFSTC-1712818698713)](./packages/toolbar/package.json) |                           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Ftoolbar%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-KvpPptbM-1712818698713)](https://unpkg.com/@hanfy/toolbar/dist/index.js) | 工具栏, 适用于 `React` |
| [`@hanfy/toolbar-vue`](./packages/toolbar-vue)                                                        |                                                        [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Ftoolbar-vue.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-mG03bGAs-1712818698713)](./packages/toolbar-vue/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Ftoolbar-vue%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-tRms9ZOS-1712818698713)](https://unpkg.com/@hanfy/toolbar-vue/dist/index.js) | 工具栏, 适用于 `Vue3`  |
| [`am-editor-toolbar-vue2`](https://github.com/zb201307/am-editor-vue2/tree/main/packages/toolbar)     |     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2Fam-editor-toolbar-vue2.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-ZPfkRJVx-1712818698713)](https://github.com/zb201307/am-editor-vue2/blob/main/packages/toolbar/package.json) |           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2Fam-editor-toolbar-vue2%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-blxPGJO7-1712818698714)](https://unpkg.com/am-editor-toolbar-vue2/dist/index.js) | 工具栏, 适用于 `Vue2`  |
| [`@hanfy/plugin-alignment`](./plugins/alignment)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-alignment.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-jFnUHe3A-1712818698714)](./plugins/alignment/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-alignment%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-Nbfthi0b-1712818698714)](https://unpkg.com/@hanfy/plugin-alignment/dist/index.js) | 对齐方式               |
| [`@hanfy/plugin-embed`](./plugins/embed)                                                              |                                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-embed.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-KbvFrNbK-1712818698714)](./plugins/embed/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-embed%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-Xx8N6xtQ-1712818698714)](https://unpkg.com/@hanfy/plugin-embed/dist/index.js) | 嵌入网址               |
| [`@hanfy/plugin-backcolor`](./plugins/backcolor)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-backcolor.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-6Eo7nnwR-1712818698714)](./plugins/backcolor/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-backcolor%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-auYmAfG6-1712818698714)](https://unpkg.com/@hanfy/plugin-backcolor/dist/index.js) | 背景色                 |
| [`@hanfy/plugin-bold`](./plugins/bold)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-bold.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-ka2tOGek-1712818698714)](./plugins/bold/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-bold%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-Im0stAoV-1712818698714)](https://unpkg.com/@hanfy/plugin-bold/dist/index.js) | 加粗                   |
| [`@hanfy/plugin-code`](./plugins/code)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-code.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-firgRHfk-1712818698714)](./plugins/code/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-code%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-TIK3NXTb-1712818698715)](https://unpkg.com/@hanfy/plugin-code/dist/index.js) | 行内代码               |
| [`@hanfy/plugin-codeblock`](./plugins/codeblock)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-codeblock.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-lvwRCPAO-1712818698715)](./plugins/codeblock/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-codeblock%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-tnD2pgUJ-1712818698715)](https://unpkg.com/@hanfy/plugin-codeblock/dist/index.js) | 代码块, 适用于 `React` |
| [`@hanfy/plugin-codeblock-vue`](./plugins/codeblock-vue)                                              |                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-codeblock-vue.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-QpWrl1p7-1712818698715)](./plugins/codeblock-vue/package.json) | [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-codeblock-vue%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-zeRF4HHR-1712818698715)](https://unpkg.com/@hanfy/plugin-codeblock-vue/dist/index.js) | 代码块, 适用于 `Vue3`  |
| [`am-editor-codeblock-vue2`](https://github.com/zb201307/am-editor-vue2/tree/main/packages/codeblock) | [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2Fam-editor-codeblock-vue2.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-64l1S2wj-1712818698715)](https://github.com/zb201307/am-editor-vue2/tree/main/packages/codeblock/package.json) |       [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2Fam-editor-codeblock-vue2%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-GVfkvhcF-1712818698715)](https://unpkg.com/am-editor-codeblock-vue2/dist/index.js) | 代码块, 适用于 `Vue2`  |
| [`@hanfy/plugin-fontcolor`](./plugins/fontcolor)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-fontcolor.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-OwXKyeVq-1712818698715)](./plugins/fontcolor/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-fontcolor%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-toZaFGmu-1712818698715)](https://unpkg.com/@hanfy/plugin-fontcolor/dist/index.js) | 前景色                 |
| [`@hanfy/plugin-fontfamily`](./plugins/fontfamily)                                                    |                                                    [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-fontfamily.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-2bZzUuoJ-1712818698715)](./plugins/fontfamily/package.json) |       [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-fontfamily%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-ozfIRAg2-1712818698715)](https://unpkg.com/@hanfy/plugin-fontfamily/dist/index.js) | 字体                   |
| [`@hanfy/plugin-fontsize`](./plugins/fontsize)                                                        |                                                        [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-fontsize.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-Kwgbr1EL-1712818698715)](./plugins/fontsize/package.json) |           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-fontsize%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-kWU0RMxB-1712818698716)](https://unpkg.com/@hanfy/plugin-fontsize/dist/index.js) | 字体大小               |
| [`@hanfy/plugin-heading`](./plugins/heading)                                                          |                                                          [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-heading.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-yZaFiw7I-1712818698717)](./plugins/heading/package.json) |             [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-heading%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-5eJJ0IgL-1712818698717)](https://unpkg.com/@hanfy/plugin-heading/dist/index.js) | 标题                   |
| [`@hanfy/plugin-hr`](./plugins/hr)                                                                    |                                                                    [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-hr.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-vS7tJMxQ-1712818698717)](./plugins/hr/package.json) |                       [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-hr%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-wcqLzY2f-1712818698717)](https://unpkg.com/@hanfy/plugin-hr/dist/index.js) | 分割线                 |
| [`@hanfy/plugin-indent`](./plugins/indent)                                                            |                                                            [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-indent.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-1DErKeui-1712818698717)](./plugins/indent/package.json) |               [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-indent%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-GxgQAhUf-1712818698717)](https://unpkg.com/@hanfy/plugin-indent/dist/index.js) | 缩进                   |
| [`@hanfy/plugin-italic`](./plugins/italic)                                                            |                                                            [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-italic.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-rV1jK8hZ-1712818698717)](./plugins/italic/package.json) |               [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-italic%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-TtFqqW3N-1712818698717)](https://unpkg.com/@hanfy/plugin-italic/dist/index.js) | 斜体                   |
| [`@hanfy/plugin-link`](./plugins/link)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-link.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-OLjbADge-1712818698717)](./plugins/link/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-link%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-TNQ6p5fb-1712818698717)](https://unpkg.com/@hanfy/plugin-link/dist/index.js) | 链接, 适用于 `React`   |
| [`@hanfy/plugin-link-vue`](./plugins/link-vue)                                                        |                                                        [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-link-vue.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-QiFTMJ3w-1712818698717)](./plugins/link-vue/package.json) |           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-link-vue%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-NODrOstH-1712818698717)](https://unpkg.com/@hanfy/plugin-link-vue/dist/index.js) | 链接, 适用于 `Vue3`    |
| [`am-editor-link-vue2`](https://github.com/zb201307/am-editor-vue2/tree/main/packages/link)           |           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2Fam-editor-link-vue2.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-JdetI8gl-1712818698717)](https://github.com/zb201307/am-editor-vue2/tree/main/packages/link/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2Fam-editor-link-vue2%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-8T7P1BZi-1712818698718)](https://unpkg.com/am-editor-link-vue2/dist/index.js) | 链接, 适用于 `Vue2`    |
| [`@hanfy/plugin-line-height`](./plugins/line-height)                                                  |                                                  [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-line-height.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-McUaw7FL-1712818698718)](./plugins/line-height/package.json) |     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-line-height%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-32yN4p2s-1712818698718)](https://unpkg.com/@hanfy/plugin-line-height/dist/index.js) | 行高                   |
| [`@hanfy/plugin-mark`](./plugins/mark)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-mark.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-0zxl3MlN-1712818698718)](./plugins/mark/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-mark%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-z021Igh1-1712818698718)](https://unpkg.com/@hanfy/plugin-mark/dist/index.js) | 标记                   |
| [`@hanfy/plugin-mention`](./plugins/mention)                                                          |                                                          [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-mention.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-CuXAv0IT-1712818698718)](./plugins/mention/package.json) |             [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-mention%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-YCo1cQt4-1712818698718)](https://unpkg.com/@hanfy/plugin-mention/dist/index.js) | 提及                   |
| [`@hanfy/plugin-orderedlist`](./plugins/orderedlist)                                                  |                                                  [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-orderedlist.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-QIxxmXFS-1712818698718)](./plugins/orderedlist/package.json) |     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-orderedlist%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-ZDHVQCrf-1712818698718)](https://unpkg.com/@hanfy/plugin-orderedlist/dist/index.js) | 有序列表               |
| [`@hanfy/plugin-paintformat`](./plugins/paintformat)                                                  |                                                  [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-paintformat.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-zB319xOS-1712818698718)](./plugins/paintformat/package.json) |     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-paintformat%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-dj2lCqI0-1712818698718)](https://unpkg.com/@hanfy/plugin-paintformat/dist/index.js) | 格式刷                 |
| [`@hanfy/plugin-quote`](./plugins/quote)                                                              |                                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-quote.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-7c2JOHWA-1712818698718)](./plugins/quote/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-quote%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-V2uGyVvb-1712818698718)](https://unpkg.com/@hanfy/plugin-quote/dist/index.js) | 引用块                 |
| [`@hanfy/plugin-redo`](./plugins/redo)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-redo.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-VhavEKXb-1712818698719)](./plugins/redo/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-redo%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-XBKii8yK-1712818698719)](https://unpkg.com/@hanfy/plugin-redo/dist/index.js) | 重做                   |
| [`@hanfy/plugin-removeformat`](./plugins/removeformat)                                                |                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-removeformat.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-qQgr1nyN-1712818698719)](./plugins/removeformat/package.json) |   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-removeformat%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-FfA5hbOl-1712818698719)](https://unpkg.com/@hanfy/plugin-removeformat/dist/index.js) | 移除样式               |
| [`@hanfy/plugin-selectall`](./plugins/selectall)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-selectall.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-DSK7UTA2-1712818698719)](./plugins/selectall/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-selectall%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-LfhXpDsH-1712818698719)](https://unpkg.com/@hanfy/plugin-selectall/dist/index.js) | 全选                   |
| [`@hanfy/plugin-status`](./plugins/status)                                                            |                                                            [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-status.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-PXUKjS6w-1712818698719)](./plugins/status/package.json) |               [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-status%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-9smkjs3o-1712818698719)](https://unpkg.com/@hanfy/plugin-status/dist/index.js) | 状态                   |
| [`@hanfy/plugin-strikethrough`](./plugins/strikethrough)                                              |                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-strikethrough.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-sFdbjjJP-1712818698719)](./plugins/strikethrough/package.json) | [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-strikethrough%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-L35y9IA0-1712818698719)](https://unpkg.com/@hanfy/plugin-strikethrough/dist/index.js) | 删除线                 |
| [`@hanfy/plugin-sub`](./plugins/sub)                                                                  |                                                                  [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-sub.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-vAyGsPPk-1712818698719)](./plugins/sub/package.json) |                     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-sub%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-2Iic5Nnf-1712818698720)](https://unpkg.com/@hanfy/plugin-sub/dist/index.js) | 下标                   |
| [`@hanfy/plugin-sup`](./plugins/sup)                                                                  |                                                                  [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-sup.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-m4RDZdg0-1712818698720)](./plugins/sup/package.json) |                     [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-sup%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-rF3dXWOP-1712818698720)](https://unpkg.com/@hanfy/plugin-sup/dist/index.js) | 上标                   |
| [`@hanfy/plugin-tasklist`](./plugins/tasklist)                                                        |                                                        [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-tasklist.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-dws116c6-1712818698720)](./plugins/tasklist/package.json) |           [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-tasklist%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-m5J1MItZ-1712818698720)](https://unpkg.com/@hanfy/plugin-tasklist/dist/index.js) | 任务列表               |
| [`@hanfy/plugin-underline`](./plugins/underline)                                                      |                                                      [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-underline.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-XqSiNDcX-1712818698720)](./plugins/underline/package.json) |         [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-underline%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-BlyIcm7H-1712818698720)](https://unpkg.com/@hanfy/plugin-underline/dist/index.js) | 下划线                 |
| [`@hanfy/plugin-undo`](./plugins/undo)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-undo.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-YwvuCZAI-1712818698720)](./plugins/undo/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-undo%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-B2L4ESOk-1712818698720)](https://unpkg.com/@hanfy/plugin-undo/dist/index.js) | 撤销                   |
| [`@hanfy/plugin-unorderedlist`](./plugins/unorderedlist)                                              |                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-unorderedlist.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-UjS8oHUs-1712818698720)](./plugins/unorderedlist/package.json) | [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-unorderedlist%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-9yg2W96Q-1712818698720)](https://unpkg.com/@hanfy/plugin-unorderedlist/dist/index.js) | 无序列表               |
| [`@hanfy/plugin-image`](./plugins/image)                                                              |                                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-image.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-k6yvqhO7-1712818698720)](./plugins/image/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-image%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-MRXlEXnN-1712818698720)](https://unpkg.com/@hanfy/plugin-image/dist/index.js) | 图片                   |
| [`@hanfy/plugin-table`](./plugins/table)                                                              |                                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-table.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-cH5DHiZt-1712818698721)](./plugins/table/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-table%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-iA4yFwbI-1712818698721)](https://unpkg.com/@hanfy/plugin-table/dist/index.js) | 表格                   |
| [`@hanfy/plugin-file`](./plugins/file)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-file.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-4UIu1kCG-1712818698721)](./plugins/file/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-file%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-3wDcaAgq-1712818698721)](https://unpkg.com/@hanfy/plugin-file/dist/index.js) | 文件                   |
| [`@hanfy/plugin-mark-range`](./plugins/mark-range)                                                    |                                                    [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-mark-range.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-ZDEVRnpo-1712818698721)](./plugins/mark-range/package.json) |       [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-mark-range%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-RNmTQBEA-1712818698721)](https://unpkg.com/@hanfy/plugin-mark-range/dist/index.js) | 标记光标, 例如: 批注.  |
| [`@hanfy/plugin-math`](./plugins/math)                                                                |                                                                [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-math.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-YEbLIF50-1712818698721)](./plugins/math/package.json) |                   [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-math%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-1qbZfR8K-1712818698721)](https://unpkg.com/@hanfy/plugin-math/dist/index.js) | 数学公式               |
| [`@hanfy/plugin-video`](./plugins/video)                                                              |                                                              [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fnpm%2Fv%2F%40hanfy%2Fplugin-video.svg%3FmaxAge%3D3600%26label%3D%26colorB%3D007ec6&pos_id=img-0swQwv4P-1712818698721)](./plugins/video/package.json) |                 [![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=http%3A%2F%2Fimg.badgesize.io%2Fhttps%3A%2F%2Funpkg.com%2F%40hanfy%2Fplugin-video%2Fdist%2Findex.js%3Fcompression%3Dgzip%26label%3D%2520&pos_id=img-mFJlD1ZA-1712818698721)](https://unpkg.com/@hanfy/plugin-video/dist/index.js) | 视频                   |

## 快速上手

### 安装

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

使用 `npm` 或者 `yarn` 安装引擎包

```bash
$ npm install @hanfy/engine
# or
$ yarn add @hanfy/engine
```

### 使用

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

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

const EngineDemo = () => {
	//编辑器容器
	const ref = useRef<HTMLDivElement | null>(null);
	//引擎实例
	const [engine, setEngine] = useState<EngineInterface>();
	//编辑器内容
	const [content, setContent] = useState<string>('<p>Hello world!</p>');

	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 <div ref={ref} />;
};
export default EngineDemo;
```

### 插件

引入 `@hanfy/plugin-bold` 加粗插件

```tsx
import Bold from '@hanfy/plugin-bold';
```

把 `Bold` 插件加入引擎

```tsx
//实例化引擎
const engine = new Engine(ref.current, {
	plugins: [Bold],
});
```

### 卡片

卡片是编辑器中的一个独立区域，其 UI 和逻辑在卡片内部可以使用 `React`、`Vue` 或其他前端库自定义渲染内容，最后再挂载到编辑器上。

我们引入了 `@hanfy/plugin-codeblock` 代码块插件，该插件的语言下拉框使用 `React` 渲染，因此有所区别。Vue3 则使用 `@hanfy/plugin-codeblock-vue`。

```tsx
import CodeBlock, { CodeBlockComponent } from '@hanfy/plugin-codeblock';
```

把 `CodeBlock` 插件和 `CodeBlockComponent` 卡片组件加入引擎

```tsx
//实例化引擎
const engine = new Engine(ref.current, {
	plugins: [CodeBlock],
	cards: [CodeBlockComponent],
});
```

`CodeBlock` 插件默认支持 `markdown`，在编辑器一行开头位置输入代码块语法` ```javascript ` 空格后即可触发。

## 节点约束

为了更方便的管理节点，降低复杂性。编辑器抽象化了节点属性和功能，制定了 `mark` `inline` `block` `card` 4 种类型节点，他们由不同的属性、样式或 `html` 结构组成，并统一使用 `schema` 对它们进行约束。

一个简单的 `schema` 看起来像是这样：

```ts
{
  name: 'p', // 节点名称
  type: 'block' // 节点类型
}
```

除此之外，还可以描述属性、样式等，比如：

```ts
{
  name: 'span', // 节点名称
  type: 'mark', // 节点类型
  attributes: {
    // 节点有一个 style 属性
    style: {
      // 必须包含一个color的样式
      color: {
        required: true, // 必须包含
        value: '@color' // 值是一个符合css规范的颜色值，@color 是编辑器内部定义的颜色效验，此处也可以使用方法、正则表达式去判断是否符合需要的规则
      }
    },
    // 可选的包含一个 test 属性，他的值可以是任意的，但不是必须的
    test: '*'
  }
}
```

下面这几种节点都符合上面的规则：

```html
<span style="color:#fff"></span>
<span style="color:#fff" test="test123" test1="test1"></span>
<span style="color:#fff;background-color:#000;"></span>
<span style="color:#fff;background-color:#000;" test="test123"></span>
```

但是除了在 color 和 test 已经在 `schema` 中定义外，其它的属性(background-color、test1)在处理时都会被编辑器过滤掉。

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

### 工具栏

引入 `@hanfy/toolbar` 工具栏，工具栏由于交互复杂，基本上都是使用 `React` + `Antd` UI 组件渲染，`Vue3` 使用 `@hanfy/toolbar-vue`

工具栏除了 UI 交互外，大部分工作只是对不同的按钮事件触发后调用了引擎执行对应的插件命令，在需求比较复杂或需要重新定制 UI 的情况下，Fork 后修改起来也比较容易。

```tsx
import Toolbar, { ToolbarPlugin, ToolbarComponent } from '@hanfy/toolbar';
```

把 `ToolbarPlugin` 插件和 `ToolbarComponent` 卡片组件加入引擎，它可以让我们在编辑器中可以使用快捷键 `/` 唤醒出卡片工具栏

```tsx
//实例化引擎
const engine = new Engine(ref.current, {
	plugins: [ToolbarPlugin],
	cards: [ToolbarComponent],
});
```

渲染工具栏，工具栏已配置好所有插件，这里我们只需要传入插件名称即可

```tsx
return (
    ...
    {
        engine && (
            <Toolbar
                engine={engine}
                items={[
                    ['collapse'],
                    [
                        'bold',
                    ],
                ]}
            />
        )
    }
    ...
)
```

更复杂的工具栏配置请查看文档 [https://editor.aomao.com/zh-CN/config/toolbar](https://editor.aomao.com/zh-CN/config/toolbar)

### 协同编辑

该开源库通过监听编辑区域(contenteditable 根节点)内的 html 结构的变化，使用 `MutationObserver` 反推数据结构，并通过 `WebSocket` 与 [Yjs](https://github.com/yjs/yjs) 连接交互，实现多用户协同编辑的功能。

#### 交互模式

每位编辑者作为 [客户端](https://github.com/red-axe/am-editor/blob/master/examples/react/components/editor/index.tsx#L250) 通过 `@hanfy/plugin-yjs-websocket` 插件中的 `Websocket` 与 [服务端](https://github.com/big-camel/am-editor/tree/master/yjs-server) 进行通信交互。

-   `@hanfy/yjs` 实现编辑器与 `Yjs` 数据的转换
-   `@hanfy/plugin-yjs-websocket` 提供编辑器与 `Yjs` 的 `WebSocket` 客户端功能
-   `@hanfy/plugin-yjs-websocket/server` 提供 `Yjs` 的 `WebSocket` 服务端，使用 Node.js 编写，并支持使用 `MongoDB` 和 `LevelDB` 存储数据。

### 项目图标

[Iconfont](https://at.alicdn.com/t/project/1456030/0cbd04d3-3ca1-4898-b345-e0a9150fcc80.html?spm=a313x.7781069.1998910419.35)

## 开发

### React

在使用该开源库之前，需要先在项目根目录中安装依赖。

```base
yarn install

lerna bootstrap
```

依赖安装好后，只需要在根目录执行以下命令即可启动项目：

```base
yarn start
```

该开源库的开发目录结构如下：

-   `packages` 存放引擎和工具栏相关代码
-   `plugins` 存放所有的插件
-   `api` 提供一些插件所需要的 API 访问，默认使用 https://editor.aomao.com 作为 API 服务
-   `yjs-server` 存放协同服务端代码，可通过 `yarn dev` 启动服务。

### Vue

[am-editor vue example](https://github.com/red-axe/am-editor-vue3-demo)

## 贡献