element-tiptap是一个 Vue.js 的基于 tiptap 和 element-ui 的富文本编辑器，具有易上手，对开发者友好，可扩展性强，设计简洁的优点，在一些文章写作的软件里经常会被用到，分享一下我在写项目时遇到的问题以及解决办法。
在项目中全局引入element-tiptap
npm下载方式
npm i element-tiptap
yarn下载方式
yarn add element-tiptap
全局引入：在main.js文件中引入
import ElementUI from 'element-ui';// 引入element-tiptap组件库import { ElementTiptapPlugin } from 'element-tiptap';import 'element-ui/lib/theme-chalk/index.css';// 引入element-tiptap样式import 'element-tiptap/lib/index.css';Vue.use(ElementUI);Vue.use(ElementTiptapPlugin, { lang: 'zh' });
注意一定要先引入elementUI，再引入element-tiptap，一定要写lang属性，不然富文本无法显示出来，控制台也会报错如下：
在组件中注册使用
<template><el-tiptapv-model="article.content":extensions="extensions"height="300"placeholder="请输入文章内容"/></template><script>import {Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Image,Strike,} from "element-tiptap";export default {name: "app-publish",data() {return {extensions: [new Doc(),new Text(),new Paragraph(),new Heading({ level: 3 }),new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮new Image(),new Underline(), // 下划线new Italic(), // 斜体new Strike(), // 删除线],}}}</script>
做完以上步骤后，即可在页面显示出富文本编辑器，这时就可以开始编辑文字了，其中可用的功能还有很多，具体的属性方法可查阅element-tiptap官方文档。
在项目中局部引入element-tiptap
局部引入是为了不污染全局，同时也能优化加载速度。
<template><el-tiptapv-model="article.content":extensions="extensions"height="300"lang="zh"placeholder="请输入文章内容"/></template><script>import {Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Image,Strike,} from "element-tiptap";import 'element-tiptap/lib/index.css';export default {name: "app-publish",data() {return {extensions: [new Doc(),new Text(),new Paragraph(),new Heading({ level: 3 }),new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮new Image(),new Underline(), // 下划线new Italic(), // 斜体new Strike(), // 删除线],}}}</script>
局部引用要在组件的使用中声明lang属性，即可开箱即用。
