文章目录
👉 前言👉 一、原理> **`el-tiptap`** 安装 及 使用案例👉 二、实现案例> 富文本输入端> 富文本输出端（展示端）👉 三、效果演示💬 小温有话说往期内容 💨👉 前言
在Vue开发中，有时候需要用到富文本框输入指定的富文本，输出端（多为表格）展示指定内容！ 这时候，富文本框插件就很重要了， 现在也存在很多富文本 插件（点击查看推荐），本次使用的是 vue集成的 element的扩展插件el-tiptap安装地址。
接下来，详细讲解安装及组件使用！
👉 一、原理
使用 富文本插件el-tiptap当作富文本输入端， 输出端 使用element自带的el-popover+el-tiptap 样式，本案例仅供参考，禁止转载！
>el-tiptap安装 及 使用案例
① 安装：
yarn add element-tiptapOrnpm install --save element-tiptapcnpm install --save element-tiptap
② 全局声明
main.js 引入import Vue from 'vue';import ElementUI from 'element-ui'; import {ElementTiptapPlugin } from 'element-tiptap';// import ElementUI's stylesimport 'element-ui/lib/theme-chalk/index.css';// import this package's stylesimport 'element-tiptap/lib/index.css';// use ElementUI's pluginVue.use(ElementUI);// use this package's pluginVue.use(ElementTiptapPlugin, {/* plugin options */ });// Now you register `'el-tiptap'` component globally.
注意：需要引用elementUi，因为element-tiptap是基于elementUI 开发的插件！
③ 使用
<template><div><el-tiptapv-model="content":extensions="extensions"/></div></template><script>import {// necessary extensionsDoc,Text,Paragraph,Heading,Bold,Underline,Italic,Strike,ListItem,BulletList,OrderedList,} from 'element-tiptap';export default {data () {// editor extensions// they will be added to menubar and bubble menu by the order you declare.return {<script>import {ElementTiptap,// 需要的 extensions，按需引用Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Strike,ListItem,BulletList,OrderedList,Link,Image,CodeBlock,Blockquote,TodoItem,TodoList,TextAlign,FontSize,FontType,Fullscreen,TextHighlight,TextColor,FormatClear,Table,TableHeader,TableCell,TableRow,History,TrailingNode,HardBreak,HorizontalRule,LineHeight,Indent} from 'element-tiptap';export default {data () {// 编辑器的 extensions// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中return {extensions: [new Doc(), // 必须项new Text(), // 必须项new Paragraph(), // 必须项new Heading({level: 6 }), // 标题new Bold({bubble: true }), // 加粗 bubble: true 在气泡菜单中渲染菜单按钮new Underline({bubble: true, menubar: false }), // 下划线 bubble: true, menubar: false 在气泡菜单而不在菜单栏中渲染菜单按钮new Italic({bubble: true }), // 斜体new Strike({bubble: true }), // 删除线new ListItem(), // 使用列表必须项new BulletList({bubble: true }), // 无序列表new OrderedList({bubble: true }), // 有序列表new Link(), // 链接new Image(), // 图片new CodeBlock({bubble: true }), // 代码块new Blockquote(), // 引用new TodoItem(), // 任务列表必须项new TodoList(), // 任务列表new TextAlign({bubble: true }), // 文本对齐方式new FontSize({bubble: true }), // 字号new FontType({bubble: true }), // 字体new Fullscreen(), // 全屏new TextHighlight({bubble: true }), // 文本高亮new TextColor({bubble: true }), // 文本颜色new FormatClear({bubble: true }), // 清除格式new Table({resizable: true }), // 表格new TableHeader(), // 表格必须项new TableCell(), // 表格必须项new TableRow(), // 表格必须项new History(), // 撤销new TrailingNode(), // 重做new HardBreak(), // 分割线new HorizontalRule(), // 行距new LineHeight(), // 增加缩进new Indent() // 减少缩进],// 编辑器的内容content: `<h1>Heading</h1><p>This Editor is awesome!</p>`,};},},</script>// editor's contentcontent: `<h1>Heading</h1><p>This Editor is awesome!</p>`,};},},</script>
element-tiptap中文文档： 点击跳转
👉 二、实现案例
> 富文本输入端
> HTML模板
<el-tiptap v-model="formData.ruleDefine"placeholder="请输入定义规则"height="200":extensions="extensions" />
JavaScript模板
import {Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Strike,ListItem,BulletList,OrderedList,TodoItem,TodoList,HorizontalRule,Fullscreen,Preview,CodeBlock,TextColor,Table,TableHeader,TableCell,TableRow} from 'element-tiptap'// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中data() {return {extensions: [new Doc(),new Text(),new Paragraph(),new Heading({level: 5 }),new Bold({bubble: true }),new Underline({bubble: true, menubar: true }), // 下划线new Italic(), // 斜体new Strike(), // 删除线new HorizontalRule(), // 分割线new Fullscreen(), // 全屏new Preview(), // 预览new CodeBlock(), // 代码块new TextColor(), // 文本颜色new ListItem(),new BulletList(), // 无序列表 (必须与 ListItem 一起使用)new OrderedList(), // 有序列表 (必须与 ListItem 一起使用)new TodoItem(),new TodoList(), // 任务列表 (必须与 ListItem 一起使用)new Table(), // (与 TableHeader, TableCell, TableRow 一起使用)new TableHeader(),new TableCell(),new TableRow()]};}
> CSS样式 - SCSS
// 富文本组件/deep/ .el-tiptap-editor {// 头部工具栏 样式.el-tiptap-editor__menu-bar {border: 1px solid #ccc;border-bottom: 0;background-color: #fff;color: #aaa;&::before {background-color: #ccc;}// 工具栏按钮.el-tiptap-editor__command-button {color: #aaa;}}// 输入框.el-tiptap-editor__content {border: 1px solid #ccc;border-bottom: 0;border-top: 0;background-color: #fff;color: #4298f3;}// 尾部栏.el-tiptap-editor__footer {border: 1px solid #ccc;background-color: #fff;color: #aaa;}}
> 富文本输出端（展示端）
HTML模板
<el-table-columnprop="ruleDefine"label="定义规则"min-width="220"><template slot-scope="scope"><divv-if="scope.row.ruleDefine"style="display: flex;justify-content: space-between;align-items: center;"><pstyle="width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"v-html="deleteHtml(scope.row.ruleDefine)"class="el-tiptap-editor__content"></p><el-popoverplacement="right"trigger="click"><pstyle="min-width: 200px;max-width: 30vw;max-height: 25vh;overflow-y: auto;"v-html="scope.row.ruleDefine"class="el-tiptap-editor__content"></p><el-buttontype="text"slot="reference"> 查看 </el-button></el-popover></div></template></el-table-column>
JavaScript模板
// 去除 HTML标签deleteHtml(info) {return info.replace(/<\/?.+?\/?>/g, '');},
👉 三、效果演示
💬 小温有话说
内容大致如上，内容需要根据实际需求做出调整，富文本组件也需要按需引用。 代码可能存在问题，如有发现，还请见谅呀！ 请私聊或者评论出问题所在， 今天的内卷就到这里啦！ 觉得有帮助的小伙伴，点点赞！支持一下吧
** 🥳 对了，今天五一噢， 卡点预祝大家！ 五一快乐吧！**
往期内容 💨
🔥 ＜ 知识拓展：CSS 中常用的计量单位有哪些？ ＞
🔥 ＜ 面试知识点：什么是 Node.js ？有哪些优缺点？应用场景？ ＞
🔥 ＜ 在Vue中，为什么 v-if 和 v-for 不建议一起使用 ？ ＞
🔥 ＜ 知识拓展：前端代码规范 ＞
