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属性,即可开箱即用。