@pageny/editor

一个功能强大且全面的 Vue 3 富文本编辑器组件。提供纸张式编辑画布、HTML 源码模式、Markdown 导入、内容模板、Emoji、图片与多媒体插入，以及 AI 续写、润色、总结、翻译和对话等智能功能。

官网：pageny.webhelp.com.cn

安装

npm install @pageny/editor

使用

<script setup>
import { PagenyEditor } from '@pageny/editor'
import '@pageny/editor/dist/style.css'

import { ref } from 'vue'

const content = ref('<p>Hello World</p>')
</script>

<template>
  <PagenyEditor v-model="content" />
</template>

配置参数

通过 config 属性统一配置：

<PagenyEditor v-model="content" :config="config" />

const config = {
  toolbar: 'undo,redo|bold,italic|image,table|fullscreen',  // 自定义字符串；不设置则展示全部按钮，false 隐藏
  upload: {
    url: 'https://a.com/upload',
    callback: (response) => response.url,
    headers: { 'Authorization': 'Bearer xxx' },
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,          // 文件大小限制（默认 10MB）
  },
  placeholder: '开始编辑...',
  maxHeight: '500px',
  characterLimit: 10000,
}

config.toolbar

工具栏配置，未设置时默认展示全部按钮：

// 默认：展示全部按钮（不设置 toolbar 即可）
toolbar: undefined

// 自定义字符串，用 `|` 分组、`,` 分隔按钮
toolbar: 'undo,redo|textStyles|color|justify|list|image,table|fullscreen'

// 隐藏工具栏
toolbar: false

按钮组（下拉式，紧凑布局）：

| 按钮组 | 包含按钮 | 说明 | |--------|----------|------| | textStyles | bold, italic, underline, strike, superscript, subscript | 文字格式 | | justify | justifyLeft, justifyCenter, justifyRight, justifyJustify | 对齐方式 | | list | bulletList, orderList, taskList, blockQuote | 列表与引用 | | insert | emoji, codeBlock, splitLine, markdown | 插入内容 | | ai | aiContinue, aiPolish, aiSummarize, aiTranslate, aiChat | AI 助手（需配置 config.ai） |

可用按钮：

| 按钮 | 说明 | |------|------| | undo redo | 撤销 / 重做 | | heading | 标题（H1-H5） | | fontSize | 字号 | | fontFamily | 字体 | | bold italic underline strike | 加粗 / 斜体 / 下划线 / 删除线 | | superscript subscript | 上标 / 下标 | | code | 行内代码 | | color highlight | 文字颜色 / 高亮 | | justifyLeft justifyCenter justifyRight justifyJustify | 对齐 | | indent outdent | 缩进 / 减少缩进 | | bulletList orderList taskList blockQuote | 无序列表 / 有序列表 / 任务列表 / 引用 | | link image table | 链接 / 图片 / 表格 | | emoji media template | Emoji / 视频音频与网页嵌入 / 企业内容模板 | | codeBlock splitLine markdown | 代码块 / 分割线 / 导入 Markdown | | clear fullscreen html preview shortcuts | 清除格式 / 全屏 / HTML 源码模式 / 预览 / 快捷键帮助 |

config.upload

图片上传配置：

upload: {
  url: 'https://test.com/upload',       // 上传地址（POST）
  callback: (response) => response.url,       // 从响应提取图片 URL；未配置时响应体即为 URL
  headers: {},                        // 自定义请求头
  accept: 'image/*',                  // 文件类型限制
  maxSize: 10 * 1024 * 1024,          // 文件大小限制（默认 10MB）
  fieldName: 'file',                  // 上传字段名
}

未配置 upload 时，本地上传/拖拽/粘贴均转 base64 内嵌。未配置 callback 时，上传接口响应体直接作为图片 URL 字符串。

config.ai

AI 集成配置，配置 socketUrl 与 licenseKey 后自动在工具栏启用 AI 按钮（aiContinue、aiPolish、aiSummarize、aiTranslate、aiChat），同时文字气泡菜单中也会出现 AI 对话入口：

ai: {
  socketUrl: 'wss://api.webhelp.com.cn/v1/ai/ws',  // AI 服务 WebSocket 地址
  licenseKey: 'FREE-AB3D-KL92-MN7X',               // 许可证密钥，由后台验证
}

| 参数 | 类型 | 默认 | 说明 | |------|------|------|------| | socketUrl | string | - | 必填。AI 服务 WebSocket 地址 | | licenseKey | string | - | 必填。许可证密钥，格式 {PLAN}-{4字符}-{4字符}-{4字符}，由后台验证 |

licenseKey 套餐与上下文上限：

后台根据 licenseKey 前缀识别套餐，决定单侧上下文最大字符数：

| 套餐 | 示例 licenseKey | 单侧上下文上限 | |------|-----------------|----------------| | FREE | FREE-AB3D-KL92-MN7X | 800 | | PRO | PRO-ABSD-KL92-MS3X | 2000 | | ENT | ENT-ABSD-KL92-MS3X | 5000 |

licenseKey 的正确性由后台验证，客户端仅负责透传。

AI 动作说明：

| 动作 | 按钮 | 需选区 | 说明 | |------|------|--------|------| | continue | aiContinue | 否 | 续写：从光标位置继续生成内容 | | polish | aiPolish | 是 | 润色：替换选区内容为优化后的版本 | | summarize | aiSummarize | 是 | 总结：在选区后追加摘要（blockquote 包裹） | | translate | aiTranslate | 是 | 翻译：替换选区内容为翻译结果 | | chat | aiChat | 否 | 对话：打开 AI 对话浮框，可引用选区文本进行问答 |

其他参数

| 参数 | 类型 | 默认 | 说明 | |------|------|------|------| | placeholder | string | '开始编辑内容...' | 占位文字 | | maxHeight | string | - | 编辑区最大高度 | | characterLimit | number \| null | null | 最大字符数，默认不限制 | | readonly | boolean | false | 只读模式：隐藏工具栏并禁用编辑 | | showStatusbar | boolean | true | 是否显示底部状态栏（字数统计） | | mobileMode | boolean | false | 是否启用移动端模式：窄容器下下拉菜单改为底部 sheet 弹层；关闭则保持桌面端定位 |

自定义工具栏按钮

通过 customButtons 注册自定义按钮，然后在 toolbar 字符串中引用其 name：

<script setup>
const config = {
  toolbar: 'undo,redo|bold,italic|sayHello,saveDraft',
  customButtons: [
    {
      name: 'sayHello',
      icon: 'emoji',           // 内置图标名
      title: '打招呼',
      action: (editor) => {
        editor.chain().focus().insertContent('👋 你好！').run()
      },
    },
    {
      name: 'saveDraft',
      label: '保存',           // 无图标时显示文字
      title: '保存草稿',
      action: () => { /* 自定义保存逻辑 */ },
      isDisabled: (editor) => !editor.getText().trim(),
      isActive: () => false,
    },
  ],
}
</script>

customButtons 选项：

| 参数 | 类型 | 说明 | |------|------|------| | name | string | 必填。按钮唯一标识，与 toolbar 字符串联动 | | title | string | 鼠标悬停提示（tooltip） | | label | string | 无图标时显示的文字 | | icon | string | 图标：内置图标名（见上方可用按钮表）或以 < 开头的原始 SVG 片段，如 '<path d="M7 13..."/>' | | action | (editor: Editor) => void | 必填。点击回调，接收 Tiptap Editor 实例 | | isActive | (editor: Editor) => boolean | 可选，返回 true 时按钮高亮 | | isDisabled | (editor: Editor) => boolean | 可选，返回 true 时按钮禁用 |

功能特性

• 完整的富文本编辑功能（标题、格式、列表、引用等）
• 可视化编辑、HTML 源码模式与预览模式
• Markdown 导入（粘贴 MD 文本一键转富文本，支持 GFM 表格、代码块高亮、任务列表等）
• AI 续写、润色、总结、翻译与对话（基于 WebSocket 流式传输）
• 选中文字气泡菜单（加粗/斜体/下划线/链接/AI 对话/高级设置/清除格式）
• 选中图片气泡菜单（尺寸调整/设置）
• 选中表格气泡菜单（行列增删/合并拆分/表头切换）
• 图片插入、拖拽上传、粘贴上传、resize 调整、百分比宽度自适应
• 表格插入、行列操作、合并单元格、列宽调整
• 代码块（语法高亮，支持 10+ 语言）
• Emoji 面板与视频、音频、网页嵌入
• 纸张式编辑画布
• 链接编辑
• 颜色选择器（文字颜色、高亮）
• 对齐、缩进
• 撤销 / 重做
• 全屏模式
• 工具栏可配置（自定义字符串 + 按钮组下拉 + 自定义按钮）
• 图片上传可配置
• 容器查询响应式布局，适配任意嵌入场景
• WCAG AA 友好的焦点样式、移动端布局和减少动态效果适配

工具函数

除 <PagenyEditor> 组件外，包还导出以下工具函数，供使用方自行接入 Markdown 导入等场景：

import { markdownToHtml } from '@pageny/editor'

| 函数 | 说明 | |------|------| | markdownToHtml(md: string): string | 将 Markdown 文本转为经安全过滤的 HTML，可直接插入编辑器（editor.chain().focus().insertContent(html).run()）。支持 GFM 表格、代码块语法高亮、任务列表、删除线等。 |

// 示例：在编辑器外自行导入 Markdown
const html = markdownToHtml('# 标题\n\n正文 **加粗**')
editor.chain().focus().insertContent(html).run()

License

MIT