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