背景

用过 wangeditor，也用过 quill。功能都有，但总觉得太重了，引入一个编辑器半兆起步，很多功能我根本用不到。

我一直想要一个轻量点的、现代点的编辑器。少数派里的编辑器体验就很好，简洁、干净、不臃肿。但找了很久，开源社区里没有类似的。要么功能太简单，要么又是一个重型方案。

正好自己在做博客网站，需要一个编辑器。干脆自己做了一个。

Sky Tiptap 是什么

Sky Tiptap 是一个 Vue 3 组件，基于 Tiptap 2.x 封装。目标很简单：让你用最少的代码得到一个功能完整的富文本编辑器。

三行代码，编辑器就出来了：

<script setup>
import { ref } from 'vue'
import { SkyTiptap } from 'sky-tiptap'
​
const content = ref('')
</script>
​
<template>
  <sky-tiptap v-model="content" />
</template>

不用注册扩展，不用配置 ProseMirror，不用写工具栏。组件内部已经帮你处理好了。

核心功能

基础编辑

该有的都有：标题（H1-H3）、粗体、斜体、下划线、删除线、无序列表、有序列表、代码块、引用块、分割线。

代码块支持语法高亮，内置了 JavaScript、TypeScript、Python、Java、Go、Rust、SQL、CSS 等 16 种语言。不是全量引入 highlight.js，是按需加载的，不会撑大包体积。

支持 Markdown 快捷输入。打 ## 加空格自动变标题，**文字** 自动加粗，- 自动变无序列表，`代码` 自动变行内代码。写惯 Markdown 的人用起来会很顺手。

多媒体

图片上传是事件驱动的。组件不内置 HTTP 请求，点插入图片后，把文件通过事件交给你，你上传完拿到 URL 再丢回来。这样做的好处是，不管你的项目用 axios、fetch 还是自己封装的请求库，都能无缝对接。支持单图和多图。

视频支持更丰富：

• B 站视频：粘贴链接或 BV 号，自动提取视频 ID 生成播放器

• YouTube：粘贴链接，自动提取视频 ID

• 抖音：粘贴链接，提取 video_id 用抖音开放平台播放器

• 本地上传：和图片一样，事件驱动，你上传完把 URL 丢回来

还有 iframe 嵌入，可以嵌入任意网页。表格插入，支持调整列宽。链接添加，Ctrl+Click 在新标签页打开。

所有弹窗交互——输入视频链接、设置链接地址、嵌入网页、错误提示——都是自定义组件，不用浏览器原生的 prompt 和 alert。原生弹窗太丑了，和编辑器风格完全不搭。

AI 能力

这是 Sky Tiptap 区别于其他编辑器组件的核心。

AI 功能不内置具体的模型服务，只负责调你配置的接口。你用 OpenAI 也好，用国产模型也好，用自己的私有部署也好，只要能返回文本，就能接。

有三种工作模式：

内容生成模式：用户输入提示词，调 AI 接口，返回的内容按 Markdown 渲染后插入编辑器。支持流式响应，AI 一边生成，编辑器一边更新，体验和 ChatGPT 类似。

编辑器操控模式：用户输入自然语言指令，比如"插入一个 3 行 4 列带表头的表格"、"把这段话改成二级标题"、"插入 B 站视频"，编辑器会先在本地解析这些指令，直接执行对应操作，不用调 AI。如果指令缺少参数——比如说"插入抖音视频"但没给链接——会自动弹出输入框让用户补充。

自动模式：先尝试本地解析指令，解析不出来再调 AI，把 AI 返回当 Markdown 内容插入。兼顾了操控和生成两种场景。

操控模式支持的操作很全：插入标题、表格、代码块、列表、链接、分割线、图片、视频、iframe，触发本地文件上传。每个操作都有参数校验——表格最多 20 行 10 列，标题限 H1-H3，URL 只接受 http/https 协议。执行前可以预览、可以回滚、可以只看不执行。

交互组件

编辑器带了几个开箱即用的交互组件：

• 工具栏：可选显示，包含格式、插入、AI 按钮

• 悬浮菜单：选中文本时出现，快速格式化

• 插入菜单：点加号展开，图片、视频、表格、代码块、AI 入口都在里面

• 弹窗组件：统一风格，自动聚焦、Esc 关闭、空值校验

谁适合用

用 Vue 3 做后台管理系统的人。 需要一个能快速集成的富文本编辑器，不想花时间调样式和写扩展。

做内容平台的人。 需要支持视频嵌入、图片上传、表格插入这些多媒体功能。

想在编辑器里加 AI 能力的人。 不管是 AI 生成内容、AI 改写续写，还是用自然语言操控编辑器，Sky Tiptap 都能直接用，不用自己写解析逻辑。

追求轻量的人。 不想引入一个几百 KB 的重型编辑器库，Sky Tiptap 的打包产物经过优化，常用语言按需加载。

设计思路

几个原则：

事件驱动，不绑架业务。 图片上传、视频上传都不内置 HTTP 逻辑，通过事件把文件交给你，你用自己的方式上传。AI 接口也是，你配置地址和密钥，组件负责调用和解析。

本地优先，AI 兜底。 编辑器操控模式下，明确的指令（比如"插入抖音视频：https://..."）先在本地解析执行，不浪费 AI 调用。模糊的指令才走 AI。

安全约束。 URL 只接受 http/https，表格有行列上限，标题有级别限制，actions 整体校验通过才执行，任一参数非法就全部拒绝。

弹窗统一。 不用原生 prompt/alert，所有交互弹窗都是自定义组件，风格和编辑器一致。

写在最后

Sky Tiptap 不是要替代 Tiptap，而是在 Tiptap 基础上提供一个更完整的方案。如果你需要深度定制编辑器行为，直接用 Tiptap 可能更合适。如果你想要一个装上就能用、带 AI 能力、长得还行的编辑器组件，可以试试 Sky Tiptap。

开源地址：https://github.com/Chelase/sky-tiptap

官方文档：https://chelase.github.io/sky-tiptap/

安装：

npm install sky-tiptap