企业官网建设流程全解析

5 分钟给 Vue3 项目装上富文本编辑器:element-tiptap 上手指南

【免费下载链接】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 是面向 Vue3 富文本编辑器场景的成品组件:内核是 tiptap 2,界面是 Element Plus,你声明要用哪些扩展,工具栏和气泡菜单就自动排好,不用自己拼 ProseMirror。v2 对应 Vue3,1.x 对应 Vue2,选型时先对齐大版本。下面走最短路径:装包、注册、出效果,全程不到五分钟。

自研编辑器总绕不开的三个坑

contenteditable 看着几行就能搞定,实际要处理选中区域合并、撤销栈维护、HTML 序列化,每样都能卡好几天。直接上 ProseMirror 又太重:节点、标记、状态管理,读文档的时间比写代码还长。element-tiptap 的位置就在中间——把 tiptap 的扩展机制收成一行 props,声明式地给出一个能用的编辑器。

写作、贴图、查源码:扩展按场景对号入座

• 日常写作:粗体、斜体、下划线、删除线,标题、引用块、有序/无序列表、待办清单、水平线,每个功能都是独立扩展,声明了才出现在工具栏。
• 贴图片与嵌入:Image 扩展负责插图和调对齐,Iframe 扩展嵌入视频页,选中素材后还能从气泡菜单直接改参数。
• 排版控制:字体、字号、文字颜色、高亮、行高、对齐、缩进各有一个扩展,FormatClear 可以一键清掉混合格式。
• 查改源码:CodeView 把编辑区切到 HTML 源码视图;output 设为 json 时能拿到 ProseMirror 文档结构,存库更方便。
• 通用配套:撤销/重做、字数统计、只读模式、12 种界面语言,都是现成的扩展或属性。

🚀 三步接入:装包、注册、出效果

第 1 步,装包。

npm install element-tiptap

peer 依赖要求 vue ≥ 3、element-plus ≥ 2,版本不满足先升级。

第 2 步,注册插件。

在入口文件里执行app.use(ElementTiptapPlugin),并引入样式element-tiptap/lib/style.css,之后el-tiptap标签就能全局使用。

第 3 步,出效果。

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

工具栏按钮的顺序,就是你声明 extensions 的顺序;想加图片,数组里补一个Image即可。

⚖️ 先判断:它适合你的项目吗

• 适合:项目已在用 Element Plus,需要在后台、CMS 或文档页快速放一个成品编辑器,不想碰底层细节。
• 不适合:要深度定制每个菜单行为、做多人协同编辑,建议直接用原生 tiptap——它底层就是 tiptap,换过去不亏。
• 注意:2.x 依赖的 tiptap 2 仍是 beta 版本号,生产引入前留意版本锁定;Vue2 项目请走 1.x 分支。

完整属性表(placeholder、width/height、事件)和 30 个扩展清单见仓库的 README,扩展实现集中在 src/extensions/,想加自定义按钮可以照着写。想跑演示:git clone https://gitcode.com/gh_mirrors/el/element-tiptap后执行npm run dev。

【免费下载链接】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