Element Tiptap富文本编辑器：Vue3项目5分钟接入带菜单的WYSIWYG编辑器

Element Tiptap富文本编辑器：Vue3项目5分钟接入带菜单的WYSIWYG编辑器

【免费下载链接】element-tiptap🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)项目地址: https://gitcode.com/gh_mirrors/el/element-tiptap

element-tiptap 是基于 tiptap 2 与 Element Plus 构建的 Vue 3 富文本编辑器（WYSIWYG），面向需要带工具栏的富文本内容编辑场景。

一句话说清

它把 tiptap 编辑内核、Element Plus 风格工具栏与悬浮气泡菜单打包成一个 Vue 3 组件，菜单按钮由扩展声明顺序自动生成，不用手写工具栏布局。与只暴露内核的方案相比，它省掉的是"从扩展拼出可用界面"这一整层工作：

• 声明即菜单：扩展数组的顺序就是工具栏按钮顺序，.configure()可单独控制某功能进工具栏还是气泡菜单
• 覆盖全场景：内置 31 个扩展，从加粗、任务列表到表格、代码视图均有现成实现
• 双格式输出：output支持'html'或 ProseMirror 结构的'json'，存取两端都方便
• 类型完备：TypeScript 编写，props、事件与扩展均有类型提示

3 分钟上手

三步接入，前提是你的项目已安装 element-plus：

1. 安装依赖，命令行一条搞定：

npm install --save element-tiptap

2. 在入口文件注册插件并引入样式，全局注册出el-tiptap组件：

import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import ElementTiptapPlugin from 'element-tiptap'; import 'element-tiptap/lib/style.css'; const app = createApp(App); app.use(ElementPlus); app.use(ElementTiptapPlugin); app.mount('#app');

3. 在页面组件里写最小示例，内容用v-model:content双向绑定，菜单能力由extensions数组决定：

<template> <el-tiptap v-model:content="content" :extensions="extensions" /> </template> <script setup> import { ref } from 'vue'; import { Doc, Text, Paragraph, Bold, Heading } from 'element-tiptap'; const content = ref('<p>开始编辑</p>'); const extensions = [Doc, Text, Paragraph, Heading, Bold]; </script>

核心用法就一条规则：你声明哪些扩展，工具栏就出现哪些按钮；用.configure({ bubble: true, menubar: false })之类的写法，可以把按钮只放进气泡菜单。

功能全景

排版与标记

基础写作能力全部内置：粗体、斜体、下划线、删除线，H1–H6 标题，引用、代码块、任务列表，左右居中及两端对齐、缩进，字号与字体族、文字颜色、高亮和一键清空格式。菜单按钮的 tooltip 提示随语言包切换。

链接与多媒体

选中文字后可通过气泡菜单快速编辑或打开链接；Image提供插入、编辑、调整位置与删除按钮；Iframe支持内嵌视频等外部页面，适合产品文档和知识库里嵌演示视频的场景。

代码视图与只读输出

CodeView一键切换 HTML 源码查看模式，便于校对结构；Readonly模式配合output="html"适合渲染已存内容。

表格、打印、全选、清空格式、撤销重做与字数统计均已内置，不需要额外拼装。

源码速查

• 核心组件：编辑器主体，props 与事件都定义在这里
• 31 个扩展：每个能力一个文件，便于按需取用
• 工具栏按钮：所有菜单命令按钮的实现
• 气泡菜单：选中文本后的悬浮操作菜单
• 12 种语言包：中、英、日等文案文件

其余细节通过 props 与事件暴露，具体行为以官方文档为准。

谁适合用

• Vue 3 项目里需要带 UI 的富文本编辑器，而不想自己拼 tiptap 界面
• 已依赖 element-plus 的后台系统，需要风格统一的编辑组件
• 内容产品要图片、表格、iframe、代码视图这类现成能力

不适合的情况：只需要一个简单 HTML 输入框、纯服务端渲染项目、对菜单样式有完全自定义要求，或项目仍是 Vue 2 的读者。

装依赖、注册插件、传一个扩展数组，编辑能力就到位了。建议先跑一遍官方 demo 感受气泡菜单和代码视图的交互，再定自己项目的菜单配置。

【免费下载链接】element-tiptap🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)项目地址: https://gitcode.com/gh_mirrors/el/element-tiptap