langchat-editor

LangChat Editor

English

面向所有 JavaScript 应用的框架无关开源 AI 编辑器。
通过 Web Component 直接接入原生 JS、React、Svelte、Angular、JSP/Servlet 等环境，也提供 Vue 3 原生组件入口。

产品官网 · Playground · LangChat 官网 · 问题反馈

LangChat Editor 是一套 AI-first、框架无关的可组合编辑系统，不只是传统富文本工具栏。它把选区级 AI、整篇文档 Agent、流式生成和可审阅的建议状态放回写作上下文，同时保留完整的文档结构、导入导出与分页能力。编辑器核心通过 Tiptap 构建，跨框架入口通过标准 Web Component 和 CustomEvent 协议提供；宿主应用可以是原生 JS、Vue、React、Svelte、Angular、Preact、Solid、JSP/Servlet，或任何能够输出 HTML 并加载 JavaScript 的 Java、PHP、.NET、Python 等服务端应用。

为什么选择 LangChat Editor

四种 AI 编辑形态

标准模式

适合内容后台、知识库、文章编辑和常规业务表单。它保留完整菜单、工具栏、浮动菜单以及丰富的文档扩展，并支持选区 AI 改写、总结和上下文审阅。

Mini 模式

适合评论、摘要、消息输入和嵌入式写作。它保留关键格式、文字颜色、背景色与斜杠菜单，让 AI 帮助把粗略想法快速整理成可发送内容，同时从扩展层限制复杂能力。

Notion 模式

适合知识库、研究笔记和长篇思考。它把编辑画布放在中心，通过上下文 AI 与整篇文档 Agent 完成总结、提纲、补写和结构化整理。

Word 模式

适合报告、方案和长篇业务文档。界面提供 Office 风格 Ribbon、A4 页面、可折叠 TOC、页码与字数状态、阅读视图和缩放控制。

图片均直接截取自仓库中的真实 Playground。演示页在任意时刻只挂载一个独立 AI 编辑器实例，切换模式时会创建新的实例。

环境要求

• Node.js 20.19 或更高版本
• 现代浏览器：Chrome 88+、Edge 88+、Firefox 78+、Safari 14+
• pnpm 11（参与项目开发时使用）

Vue 3 只在直接使用 langchat-editor 主入口时需要；使用 langchat-editor/element 或 @langchat/editor-react 时，编辑器运行时会随产物提供，宿主应用不需要改造成 Vue 项目。

安装

pnpm add langchat-editor

也可以使用 npm：

npm install langchat-editor

跨框架使用（推荐入口）

跨框架集成的推荐边界是 Web Component。langchat-editor/element 会把 Vue runtime、编辑器样式、AI 能力和扩展运行时一起打进产物，宿主只需要使用标准自定义元素、DOM property 和 CustomEvent：

import 'langchat-editor/element'
import { AI, BaseKit, History } from 'langchat-editor/element'

const editor = document.querySelector('langchat-editor')
editor.value = '<h1>AI launch brief</h1><p>Select text to ask AI.</p>'
editor.extensions = [BaseKit, History, AI]
editor.addEventListener('lc-change', event => {
  console.log(event.detail.value, event.detail.format)
})

editor.openAI('document')

原生 JS、JSP/Servlet、Vue、Svelte、Angular、Preact、Solid 和其他支持 Web Components 的页面都可以直接使用 <langchat-editor>；Java、PHP、.NET、Python 等服务端语言只需要把生成的 JS/CSS 作为静态资源输出即可。这些宿主共享同一套 DOM property 与 CustomEvent 协议，不需要重复实现编辑器。React 项目可以安装薄包装 @langchat/editor-react，它只负责 props、ref 和 DOM CustomEvents 的映射，不会复制编辑器 UI 或 AI 实现。主包的 Web Component 入口和 React 适配包都带有明确的 TypeScript declaration files，能够直接获得元素、props、事件和 AI detail 类型。

跨框架适配层使用统一的 DOM 协议：lc-ready、lc-input、lc-change、lc-enter、lc-error 和 lc-ai。lc-ai 的 detail.type 覆盖 start、delta、complete、error、abort、accept、reject、insert 与 regenerate，因此原生 JS、React、JSP/Servlet 和其他框架都能观察同一条 AI 流式与审阅链路。复杂配置通过 DOM property 传递，AI 请求仍然使用 OpenAI-compatible Chat Completions + SSE；生产环境建议由 Servlet 或其他服务端代理保存模型密钥。

完整示例见 examples/。

注意：上面的 langchat-editor/element 是 npm 裸模块名，必须由 Vite/Webpack 等 bundler 或 import map 解析，不能直接在 file:// 页面中解析。仓库里的 examples/vanilla/index.html 使用 lib/langchat-editor-element.umd.js，执行 pnpm build:element 后可以直接双击打开。

快速开始（Vue 3 原生组件）

<script setup lang="ts">
import { ref } from 'vue'
import {
  BaseKit,
  AI,
  Bold,
  BulletList,
  Heading,
  History,
  Italic,
  LangChatEditor,
  Link,
  OrderedList,
  Underline,
} from 'langchat-editor'
import 'langchat-editor/style.css'

const content = ref('<h1>AI launch brief</h1><p>Select a sentence and ask AI to rewrite it in context.</p>')
const extensions = [BaseKit, History, Heading, Bold, Italic, Underline, Link, BulletList, OrderedList, AI]
</script>

<template>
  <LangChatEditor v-model="content" :extensions="extensions" :min-height="320" />
</template>

也可以全局安装组件：

import { createApp } from 'vue'
import LangChatEditor from 'langchat-editor'
import 'langchat-editor/style.css'
import App from './App.vue'

createApp(App).use(LangChatEditor).mount('#app')

切换编辑模式

模式是组件配置，不会改变 v-model 的使用方式。

<template>
  <!-- 完整编辑器 -->
  <LangChatEditor v-model="standardContent" :extensions="standardExtensions" mode="default" />

  <!-- 只开放必要能力的紧凑编辑器 -->
  <LangChatEditor
    v-model="miniContent"
    :extensions="miniExtensions"
    :mini-extensions="[
      'base-kit',
      'history',
      'heading',
      'bold',
      'italic',
      'underline',
      'color',
      'highlight',
      'bulletList',
      'orderedList',
      'textAlign',
      'link',
      'slashCommand',
    ]"
    mode="mini"
  />

  <!-- Office 风格分页工作台 -->
  <LangChatEditor
    v-model="documentContent"
    v-model:word-header-footer="wordHeaderFooter"
    :extensions="wordExtensions"
    :toc="{ enable: true, position: 'left', maxLevel: 3, defaultOpen: false }"
    :word-page-count="2"
    mode="word"
  />
</template>

常用配置

完整类型定义见 src/type.ts。

事件与编辑器实例

• update:modelValue：内容变化时更新 v-model。
• change：返回编辑器实例与当前输出内容。
• enter：配置 enter 后，在按下 Enter 时触发。

需要直接调用 Tiptap API 时，可以通过组件引用取得实例：

<script setup lang="ts">
import { ref } from 'vue'

const editorRef = ref()

function focusEditor() {
  editorRef.value?.editor.commands.focus()
}
</script>

<template>
  <LangChatEditor ref="editorRef" />
</template>

扩展系统

项目导出的主要扩展包括：

• 基础：BaseKit、History、Clear、FormatPainter、Fullscreen
• 文本：Bold、Italic、Underline、Strike、MoreMark、Color、Highlight
• 排版：Heading、FontSize、FontFamily、TextAlign、LineHeight、Indent
• 内容块：Blockquote、HorizontalRule、Code、CodeBlock、Iframe、Columns
• 列表：BulletList、OrderedList、TaskList
• 媒体：Image、ImageUpload、Video、VideoUpload
• 文档：Table、Link、Toc、FindAndReplace、SourceCode、Preview、Printer、ImportWord、ExportWord
• 交互：SlashCommand、SpecialCharacter、AI

每个扩展都可以通过 configure 独立调整：

const extensions = [
  BaseKit.configure({
    placeholder: { placeholder: '输入内容...' },
    characterCount: { limit: 50000 },
  }),
  Heading.configure({ levels: [1, 2, 3] }),
  Image.configure({ inline: false }),
  Table.configure({ resizable: true }),
]

完整组合示例见 playground/src/utils/createDemoExtensions.ts。更多可交互的模式、插件和框架配置见 在线文档。

AI 接入

LangChat Editor 内置 OpenAI Chat Completions 兼容适配器，通过浏览器原生 fetch 请求接口，并正确解析流式 SSE 数据。项目不包含也不需要 openai npm 依赖。

import { AI, createOpenAICompletions } from 'langchat-editor'

const ai = AI.configure({
  completions: createOpenAICompletions({
    temperature: 0.7,
  }),
  modelConfig: {
    model: 'gpt-4.1-mini',
    baseURL: 'https://api.openai.com/v1',
    apiKey: 'your-api-key',
  },
  showModelConfig: true,
})

baseURL 可以指向任何兼容 /chat/completions 与流式响应格式的服务。生产环境不应把长期有效的 API Key 直接写入前端代码；建议由自己的服务端代理鉴权，并通过 headers 或短期令牌接入。

如果需要完全控制请求过程，也可以向 AI.configure({ completions }) 传入自己的回调。

Playground 使用 Gitee AI

Playground 已预置 Gitee AI 的 OpenAI 兼容接口和 GLM-5 模型。复制示例配置到 Playground 的本地环境文件，再填写自己的密钥：

cp playground/.env.example playground/.env.local

VITE_PLAYGROUND_AI_API_KEY='your-gitee-api-key'
VITE_PLAYGROUND_AI_BASE_URL='https://ai.gitee.com/v1/chat/completions'
VITE_PLAYGROUND_AI_MODEL='GLM-5'

然后运行 pnpm dev，在 Playground 中即可使用 AI 工具。playground/.env.local 已加入 .gitignore，不会被提交；请勿把真实密钥写入 .env.example、源码或截图中。

这些 VITE_ 变量会随前端构建产物暴露给浏览器，只适合本地演示。生产环境请使用自己的服务端代理保存密钥，再将代理地址配置到 VITE_PLAYGROUND_AI_BASE_URL。

文档工作流

TOC 目录

启用 Toc 扩展并传入 toc 配置后，工具栏会显示目录开关。目录默认折叠；用户点击后才会从编辑区域左侧或右侧展开，并根据滚动位置同步当前标题层级。

Word 导出

把 ExportWord 加入扩展列表后，文件菜单和工具栏会提供 Word 导出入口。也可以直接调用：

editor.commands.exportToWord('report.docx')

预览与打印

预览会把当前实例切换为只读呈现，不再创建互相覆盖的全局弹窗。打印内容同样来自触发操作的编辑器实例，并使用独立打印样式。

本地开发

git clone https://github.com/tycoding/langchat-editor.git
cd langchat-editor
pnpm install
pnpm dev

根目录的 workspace 会同时安装 Playground、React example 和 Svelte example。启动其他案例：

pnpm --filter langchat-editor-react-example dev
pnpm --filter langchat-editor-svelte-example dev

常用命令：

项目结构

langchat-editor/
├── src/
│   ├── components/       # 编辑器外壳、菜单、目录与对话框
│   ├── extensions/       # 可组合的 Tiptap 扩展
│   ├── hooks/            # 主题、状态、焦点与 TOC hooks
│   ├── locales/          # 简体中文与英文文案
│   └── styles/           # 以 .lc-editor 为边界的编辑器样式
├── playground/           # 产品首页、生态页与交互式 Playground
├── packages/editor-react/ # React 薄适配包
├── examples/              # 原生 JS、React、Svelte、JSP/Servlet 示例
├── vite.element.config.ts # 自包含 Web Component 构建入口
└── README.en.md          # English project overview

编辑器的模块边界、插件生命周期、AI 事件协议、主题方案和构建流程见 在线文档中心。

文档索引

• 在线文档中心：基础能力、模式、插件、AI、Agent、框架接入与配置参考
• 示例目录：原生 JS、React、Svelte、JSP/Servlet
• 贡献指南
• 行为准则
• 安全说明

常见问题

参与贡献

欢迎提交 Issue、文档改进、扩展能力与修复。开始前请阅读：

• 贡献指南：开发环境、分支、提交与 Pull Request 约定
• 行为准则：社区协作边界
• 安全说明：私下报告安全问题的方式

提交 Pull Request 前建议运行 pnpm check，并同步更新受影响的文档与 Playground 示例。

LangChat Team

LangChat Editor 由 LangChat Team 构建和维护，是 LangChat 开源 AI 产品生态中的编辑基础设施。

• LangChat 官网：https://langchat.cn
• LangChat Editor 官网：https://editor.langchat.cn
• 开源仓库：https://github.com/tycoding/langchat-editor

致谢

项目建立在 Vue、Tiptap、Reka UI 与 Lucide 等优秀开源项目之上。

许可证

LangChat Editor 基于 MIT License 开源。你可以自由使用、修改和分发，并保留许可证与版权声明。