[JS/TS] 面向AI的下一代富文本编辑器AIEditor：基于Web Component，开源且全框架支持

项目介绍

AIEditor 是一个面向 AI 的下一代富文本编辑器，旨在打造一个完全由 AI 驱动的富文本编辑体验。它不仅支持所有主流前端框架，还能很好地适配 PC Web 端和手机端。

其核心基于 Web Component 开发，这意味着它可以无缝集成到 Layui、Vue、React、Angular、Svelte 等几乎任何前端技术栈中。编辑器默认提供了亮色和暗色两种主题，并针对移动端进行了专门优化。此外，其灵活的配置项允许开发者轻松定制，以满足各种文字编辑类应用的需求。

应用场景

AIEditor 适用于多种需要富文本编辑能力的场景，包括但不限于：

• 在线文档编辑：如企业内部的协作文档、个人知识库笔记等。
• 内容管理系统（CMS）：作为后台内容创作与编辑的核心工具。
• 博客和论坛：为用户提供强大的富文本编辑功能，提升发帖和内容创作体验。
• 在线教育平台：用于编辑和展示课程资料、习题解析等。
• AI 辅助写作：结合其内置的 AI 功能，直接提供智能续写、优化、校对和翻译等服务。

功能模块

基础编辑功能

• 文本格式：支持标题、正文、字体、字号、加粗、斜体、下划线、删除线、链接、行内代码、上标、下标、分割线、引用、打印等。
• 编辑操作：提供撤回、重做、格式刷、橡皮擦等常用编辑工具。
• 样式设置：可调整字体颜色、背景颜色、插入 Emoji 表情、设置对齐方式、行高、有序/无序列表、段落缩进和强制换行。

附件功能

• 支持图片、视频、文件上传，并涵盖选择上传、粘贴上传、拖拽上传多种方式。
• 上传后的附件支持直接拖动调整大小。

代码功能

• 支持行内代码和代码块。
• 可为代码块选择编程语言类型。
• 提供 AI 自动注释、AI 代码解释等智能功能。

表格功能

• 支持对表格进行左/右增删列、上/下增删行操作。
• 提供合并单元格与解除合并功能。

Markdown 支持

• 兼容常用 Markdown 语法，包括标题、引用、表格、图片、代码块、高亮块（类似 vuepress 的 :::）、各种列表、粗体、斜体、删除线等。

AI 功能

• 核心AI能力：AI 续写、优化、校对、翻译。
• 高度自定义：允许用户自定义 AI 菜单及其对应的 Prompts 提示词。
• 多媒体AI：支持通过 AI 插入图片，以及 AI 图生图（图片优化）功能。

其他功能

• 国际化（i18n）支持。
• 亮色/暗色主题切换。
• 完善的手机端适配。
• 全屏编辑模式。
• @提及某人功能。

功能特点

• AI 驱动

  • AIEditor 的核心目标是打造完全由 AI 驱动的编辑体验，它支持对接任意大模型，包括私有的、部署在本地的大模型。
  • 用户可以使用自己的私有模型 API Key，并完全自定义 prompt 和扩展 AI 功能菜单。

• 简单、友好、易用

  • 基于 Web Component 的开发方式，确保了与任意主流前端框架的集成都非常简单。
  • 采用 LGPL 开源协议，只需执行 npm i aieditor 即可安装使用，有效避免了 GPL 协议可能带来的“传染性”问题。

• 多平台适配

  • 同时适配 PC Web 端和手机端，并提供亮色和暗色两种主题，适应不同设备和用户偏好。

• 灵活配置

  • 提供了丰富的配置选项，开发者可以方便地利用 AIEditor 构建任何类型的文字编辑应用。

功能演示

以下是 AIEditor 在实际使用中的一些界面展示：

开源地址

项目的完整源代码托管在 Gitee 上，感兴趣的开发者可以前往查阅或贡献代码：
https://gitee.com/aieditor-team/aieditor

---

像 AIEditor 这样集成了前沿 AI 能力且设计友好的开源项目，非常适合在 云栈社区 这样的开发者平台上进行分享和讨论，能够帮助更多前端开发者快速构建智能化的编辑体验。