wangEditor5在vue中的基本使用

目录

一、wangEditor5是什么

二、wangEditor5基本使用

（一）、安装

（二）、编译器引入

（三）、css及变量引入

三、wangEditor5工具栏配置

（一）、editor.getAllMenuKeys() 

（二）、toolbarConfig中的excludeKeys

四、wangEditor5上传图片

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

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

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

---

一、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;
  }
  
}

六、完整代码