vue中wangEditor5编辑器的基本使用

目录

• 一、wangEditor5是什么
• 二、wangEditor5基本使用
• （一）、安装
• （二）、编译器引入
• （三）、css及变量引入
• 三、wangEditor5工具栏配置
• （一）、editor.getAllMenuKeys() 
• （二）、toolbarConfig中的excludeKeys
• 四、wangEditor5上传图片
• 五、wangEditor5的一些问题收集及解决
• 六、完整代码
• 总结

一、wangEditor5是什么

wangEditor是一款富文本编译器插件，其他的我就不再过多赘述，因为官网上有一大截对于这个编译器的介绍，但我摸索使用的这两天里给我的最直观的感受就是，它是由中国开发者开发，所有的文档都是中文的，这一点上对我这个菜鸡来说非常友好，不用再去逐字逐句翻译，然后去读那些蹩脚的机翻中文。而且功能很丰富，能够满足很多需求，wangEditor5提供很多版本的代码，vue2，vue3，react都支持。

接下来就介绍一下wangEditor5的基本使用，以及博主在使用中遇到的各种问题以及其解决方案。

官方网站：

wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/

二、wangEditor5基本使用

（一）、安装

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

（二）、编译器引入

import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

Editor：引入@wangEditor编译器 

Toolbar：引入菜单栏

（三）、css及变量引入

这里需要注意，引入的样式写在带有scoped标签的style内无效。只能引入在全局样式里，但可能会造成样式覆盖，一般会有个清除样式的文件，会把里面的样式覆盖掉。

三、wangEditor5工具栏配置

工具栏配置有很多选项，这里以官方为主，我只做一些常用的配置介绍。

（一）、editor.getAllMenuKeys() 

查询编辑器注册的所有菜单 key （可能有的不在工具栏上）这里注意要在

    onCreated(editor) {
            this.editor = Object.seal(editor) 
        },

这个函数中去调用 （这个函数是基本配置之一），不然好像调不出来，当然也有可能是博主太菜。

（二）、toolbarConfig中的excludeKeys

toolbarConfig: {
        excludeKeys:["uploadVideo","fullScreen","emotion","insertTable"]
       },

这个是菜单栏配置的一种：排除某项配置 ，这里填写的key值就是用上面那个方法，查出来的key值。

四、wangEditor5上传图片

首先在data中return以下信息。

editorConfig: { 
        placeholder: '请输入内容...' ,
        MENU_CONF: {
					uploadImage: {
						customUpload: this.uploadImg,
					},
				}
      },

然后书写this.uploadImg函数。

 uploadImg(file, insertFn){
      let imgData = new FormData();
			imgData.append('file', file);
      axios({
        url: this.uploadConfig.api,
        method: 'post',
        data: imgData,
      }).then((response) => {
       insertFn(response.data.FileURL);
      });
    },

注意，这里因为返回的数据结构与@wangeditor要求的不一致，因此要使用 insertFn 函数 去包裹返回的url地址。

五、wangEditor5的一些问题收集及解决

（一）、引入@wangEditor 编译报错 " Module parse failed: Unexpected token (12828:18)You may need an appropriate loader to handle this file type."

解决方法：在 wwebpack.base.conf.js 文件的module>rules>.js 的include下加入

resolve('node_modules/@wangeditor')

 就可以了。

（二）、@wangeditor有序列表无序列表的样式消失问题。

大概率是全局样式清除导致的样式消失，可以去调试工具里看一看，样式覆盖的问题。

然后在style里deep一下改变样式就行了。

.editorStyle{
  /deep/ .w-e-text-container>.w-e-scroll>div ol li{
    list-style: auto ;
  }
  /deep/ .w-e-text-container>.w-e-scroll>div ul li{
    list-style: disc ;
  }
  /deep/ .w-e-text-placeholder{
    top:7px;
  }
  
}

六、完整代码

总结

到此这篇关于vue中wangEditor5编辑器的基本使用的文章就介绍到这了,更多相关vue wangEditor5的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！