国产开源 AI 富文本编辑器

每天给大家带来网站工具、开源社区项目、开源软件、安卓&IOS软件等黑科技！

如果你们有什么好的建议，也可以在后台留言。

创作不易，希望大家给一点鼓励，把公众号设置为"星标"，给文章点下"赞"和"在看"，谢谢大家！每日持续更新，望宝子们多多支持~

国产开源的 AI 编辑器：AiEditor，一个面向 AI 的富文本编辑器，基于 Web Component，支持 Layui、Vue、React、Angular 等几乎任何前端框架。适配 PC Web 端和移动端，提供 亮色 和 暗黑 主题。此外还提供了灵活的配置，开发者可以方便地使用其开发任何文字编辑的应用。

✨功能预览

• 基础：标题、正文、字体、字号、下划线、删除线、链接、行内代码、加粗、斜体、上标、下标、分割线、引用、打印
• 表格：左增右增、上减下减、合并单元格、左减右减、上增下增、解除合并
• 附件：支持视频、图片、文件功能，支持选择粘贴上传、拖拽上传、支持拖动调整大小...
• 代码：代码块、行内代码、代码语言选择
• 增强：撤回、重做待办事项、字体颜色、背景颜色、Emoji 表情、、行高、有（无）序列表、对齐方式、、格式刷、橡皮擦段落缩进、强制换行
• 支持亮色主题、暗色主题
• 支持手机适配、全屏编辑、@某某某（提及）等
• AI：AI 续写、、AI 翻译、AI 校对、AI 优化自定义 AI 菜单及其 Prompts

效果预览：

🧰本地安装

npm 安装，命令如下：

npm i aieditor

代码初始化：

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

🍄 本地构建运行

1、使用Git命令拉拉取最新的源码

git clone https://gitee.com/aieditor-team/aieditor.git


cd aieditor

2、安装依赖

npm install

3、修改 src/main.ts 内容如下：

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

或者直接移除 AI 的配置，如下所示（移除后，则不能使用 AI 功能）：

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

4、执行命令如下命令运行

npm run dev

🎈 AI 功能配置

1、去科大讯飞注册账号 

地址：https://xinghuo.xfyun.cn

2、添加科大讯飞星火大模型的相关配置

在科大讯飞服务管理中获取 appId、apiKey、apiSecret。

地址：https://console.xfyun.cn/services/bm2

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

点关注不迷路

本文发表于公众号【爱编程爱技术】

关注我们，阅读更多精彩内容

点击上方关注我们，谢谢支持！

往期推荐：