AiEditor

关于 AiEditor（官网 https://aieditor.dev ）

AiEditor 是一个面向 AI 的下一代富文本编辑器，她基于 Web Component，因此支持 Layui、Vue、React、Angular 等几乎任何前端框架。她适配了 PC Web 端和手机端，并提供了 亮色 和 暗色 两个主题。除此之外，她还提供了灵活的配置，开发者可以方便的使用其开发任何文字编辑的应用。

在线演示

http://aieditor.jpress.cn

 

在 beta.7 版本中，我们添加了对 Markdown 编辑的支持，Markdown 已经支持：标题、引用、表格、图片、代码块、高亮块（类型 vuepress 的 :::）、各种列表、粗体、斜体、删除线...

 

除此之外，AiEditor 还支持多种数据导出，导出 Html、导出 Json、导出 Markdown 等功能，在以上的内容中，AiEditor 导出的 Html 内容如下：

 <p>   <a href="https://aieditor.dev">AiEditor</a> 是一个面向 AI   的下一代富文本编辑器。 </p> <p><strong>提示：</strong></p> <ol class="tight" data-tight="true">   <li><p>输入 空格 + "/" 可以快速弹出 AI 菜单</p></li>   <li><p>输入 空格 + "@" 可以提及某人</p></li> </ol> <p></p> 

导出的 Json 内容如下：

 {     "type":"doc",     "content":[         {             "type":"paragraph",             "content":[                 {                     "type":"text",                     "marks":[                         {                             "type":"link",                             "attrs":{                                 "href":"https://aieditor.dev"                             }                         }                     ],                     "text":"AiEditor"                 },                 {                     "type":"text",                     "text":" 是一个面向 AI 的下一代富文本编辑器。"                 }             ]         },         {             "type":"paragraph",             "content":[                 {                     "type":"text",                     "marks":[                         {                             "type":"bold"                         }                     ],                     "text":"提示："                 }             ]         },         {             "type":"orderedList",             "content":[                 {                     "type":"listItem",                     "content":[                         {                             "type":"paragraph",                             "content":[                                 {                                     "type":"text",                                     "text":"输入 空格 + \\"/\\" 可以快速弹出 AI 菜单 "                                 }                             ]                         }                     ]                 },                 {                     "type":"listItem",                     "content":[                         {                             "type":"paragraph",                             "content":[                                 {                                     "type":"text",                                     "text":"输入 空格 + \\"@\\" 可以提及某人"                                 }                             ]                         }                     ]                 }             ]         }     ] }

导出的  Markdown 内容如下：

 [AiEditor](https://aieditor.dev) 是一个面向 AI 的下一代富文本编辑器。  **提示：**   1. 输入 空格 + "/" 可以快速弹出 AI 菜单  2. 输入 空格 + "@" 可以提及某人

 

另外，在 beta.7 中，AiEditor 新增了 getOutline() 方法，轻松获取编辑内容的目录，可以轻易的做出类似腾讯文档右侧的文档目录功能。

 

v1.0.0-beta.7 更新细节：

• 新增：AiEditor 添加 getMarkdown() 方法，用于获得 markdown 内容
• 新增：AiEditor 添加 getOutline() 方法，用于获得文章的目录内容
• 新增：AiEditor.focusPos(pos) 方法用于定位当前焦点到指定位置
• 新增：添加 "高亮块" 功能，类型 vuepress 的 :::
• 修复：修改附件上传时，未配置上传 url 的情况下出现错误的问题
• 修复：字号大小设置菜单无法设置到默认字号的问题
• 修复：自定义 AI 菜单时，添加 4 个以上菜单会出现滚动条的问题
• 优化：AiEditor 类合并 insertHtml 和 insertMarkdown 为 insert 方法
• 优化：优化编辑区的链接、图片、表格的浮动菜单有警告输出的问题
• 优化：重命名工具类的 Title 为 Heading
• 样式：优化链接弹出编辑框网址输入栏不对齐的问题
• 样式：弹出框等元素添加 3px 圆角，使之在 UI 效果上更精致
• 样式：修改内容编辑区的表格有一个横向滚动条的问题
• 样式：优化菜单中插入表格的鼠标移动样式
• 文档：更细 AiEditor 的 API 方法列表

 

快速开始

安装：

 npm i aieditor

 

使用：

 new AiEditor({     element: "#aiEditor",     placeholder: "点击输入内容...",     content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ', })

 

更多访问官网：https://aieditor.dev/zh/getting-started.html