# chatEditor
**Repository Path**: lyl340321/chat-editor
## Basic Information
- **Project Name**: chatEditor
- **Description**: chatEditor
- **Primary Language**: Unknown
- **License**: LGPL-2.1
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-07-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
!\[]\(./docs/assets/image/readme-banner.png null)
AI 驱动的下一代富文本编辑器
开箱即用 | 全框架支持 | Markdown 友好
!\[]\(./docs/assets/image/index-banner1.png null)
## 简介
ChatEditor 是一个面向 AI 的下一代富文本编辑器，基于 [TipTap](https://tiptap.dev/) 和 [Web Component](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components) 开发。它支持几乎所有主流前端框架（Vue、React、Angular、Svelte、Layui 等），提供亮色和暗色两种主题，并具备灵活的配置能力。
## 特性
### AI 驱动
- 支持 AI 续写、AI 优化、AI 校对、AI 翻译
- 支持自定义 AI 菜单和 Prompts
- 支持对接多种大模型：OpenAI、通义千问、文心一言、讯飞星火、Gitee AI、自定义模型
- 支持 AI 代码注释、AI 代码解释
### 编辑器功能
- **基础功能**: 标题、正文、字体、字号、加粗、斜体、下划线、删除线、链接、行内代码、上标、下标、分割线、引用、打印
- **增强功能**: 撤回、重做、格式刷、橡皮擦、待办事项、字体颜色、背景颜色、Emoji 表情、对齐方式、行高、有序/无序列表、段落缩进
- **附件支持**: 图片、视频、文件上传（支持选择、粘贴、拖拽上传，支持拖动调整大小）
- **代码块**: 行内代码、代码块、语法高亮、AI 自动注释、AI 代码解释
- **表格**: 增删行列、合并单元格、表格样式
- **Markdown**: 标题、引用、表格、图片、代码块、高亮块、列表、粗体、斜体、删除线等
- **其他**: 国际化（11种语言）、亮/暗主题、移动端适配、全屏编辑、@提及功能
### 商业 Pro 版
- 类 Notion 内容块拖拽
- Word 导入/导出
- PDF 导出
- LaTeX 数学公式
- 团队协作（多人同时编辑）
- 批注功能
## 安装
```bash
npm install aieditor
```
## 快速开始
### 基础用法
```html
```
### 配置 AI 模型
```javascript
new AiEditor({
element: "#editor",
ai: {
models: {
openai: {
endpoint: "https://api.openai.com/v1/chat/completions",
model: "gpt-4o",
apiKey: "your-api-key",
},
qianwen: {
model: "qwen-turbo",
apiKey: "your-api-key",
}
}
}
});
```
### Vue 3 集成
```vue
```
### React 集成
```tsx
import { useEffect, useRef } from 'react';
import { AiEditor } from 'aieditor';
import 'aieditor/dist/style.css';
function Editor() {
const containerRef = useRef(null);
const editorRef = useRef();
useEffect(() => {
if (containerRef.current) {
editorRef.current = new AiEditor({
element: containerRef.current,
placeholder: "请输入内容...",
});
}
return () => editorRef.current?.destroy();
}, []);
return ;
}
```
## API
### 核心方法
| 方法 | 说明 |
| ------------------------ | ------------------------ |
| `getHtml()` | 获取 HTML 内容 |
| `getJson()` | 获取 JSON 内容 |
| `getMarkdown()` | 获取 Markdown 内容 |
| `getText()` | 获取纯文本 |
| `setContent(html)` | 设置 HTML 内容 |
| `setMarkdownContent(md)` | 设置 Markdown 内容 |
| `insert(content)` | 插入内容 |
| `clear()` | 清空内容 |
| `focus()` | 聚焦编辑器 |
| `blur()` | 失焦 |
| `destroy()` | 销毁编辑器 |
| `changeTheme(theme)` | 切换主题 ('light' \| 'dark') |
| `changeLang(lang)` | 切换语言 |
| `setEditable(editable)` | 设置是否可编辑 |
| `getOutline()` | 获取文档大纲 |
### 配置选项
```typescript
interface AiEditorOptions {
element: string | Element; // 容器元素
content?: string; // 初始内容
contentIsMarkdown?: boolean; // 内容是否为 Markdown
contentRetention?: boolean; // 是否自动保存到 localStorage
placeholder?: string; // 占位文本
lang?: string; // 语言 (zh, en, ja 等)
theme?: 'light' | 'dark'; // 主题
editable?: boolean; // 是否可编辑
toolbarKeys?: string[]; // 工具栏按钮配置
ai?: AiGlobalConfig; // AI 配置
image?: ImageConfig; // 图片配置
video?: VideoConfig; // 视频配置
attachment?: AttachmentConfig; // 附件配置
// ...更多配置
}
```
## 支持的 AI 模型
| 模型 | 配置键 | 说明 |
| -------- | --------- | ------------------ |
| OpenAI | `openai` | 支持 GPT-3.5、GPT-4 等 |
| 通义千问 | `qianwen` | 阿里云大模型 |
| 文心一言 | `wenxin` | 百度大模型 |
| 讯飞星火 | `spark` | 科大讯飞大模型 |
| Gitee AI | `gitee` | Gitee AI 模型 |
| 自定义 | `custom` | 支持自定义 API |
## 国际化
支持 11 种语言：中文、英文、日语、韩语、德语、葡萄牙语、西班牙语、印地语、印尼语、泰语、越南语。
```javascript
new AiEditor({
element: "#editor",
lang: "en", // 设置语言
});
```
## 技术栈
- [TipTap](https://tiptap.dev/) - 编辑器核心框架
- [ProseMirror](https://prosemirror.net/) - 底层文档模型
- [Lit](https://lit.dev/) - Web Component 框架
- [i18next](https://www.i18next.com/) - 国际化
- [lowlight](https://github.com/wooorm/lowlight) - 代码语法高亮
## 开源协议
ChatEditor 采用 [LGPL](./LICENSE) 开源协议，您可以放心在商业项目中使用，无需担心 GPL 协议的传染性问题。