使用element-tiptap富文本编辑器lang报错

最新推荐文章于 2024-09-13 21:36:07 发布

古灵精怪的前端攻城狮

最新推荐文章于 2024-09-13 21:36:07 发布

阅读量632

点赞数

分类专栏：前端插件 element-tiptap 文章标签： vue.js javascript elementui ui 前端

本文链接：https://blog.csdn.net/qq_43439051/article/details/128499181

版权

本文介绍了在Vue.js项目中使用element-tiptap富文本编辑器时遇到的lang报错问题及其解决方案。需全局或局部引入elementUI和element-tiptap，并确保在引入时设置lang属性，否则会导致富文本无法显示并出现控制台错误。正确引入后，可在组件中正常使用编辑器功能。

摘要由CSDN通过智能技术生成

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属性，不然富文本无法显示出来，控制台也会报错如下：
在这里插入图片描述