wangEditor5在vue中的基本使用

发布时间：2023-03-18 19:00

一、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及变量引入

<style src="@wangeditor/editor/dist/css/style.css" >

</style>

这里需要注意，引入的样式写在带有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')

就可以了。