wangEditor 5的使用以和使用的错误

其实官网https://www.wangeditor.com/v5/for-frame.html#demo也说的很详细，这不是记录一下，哈哈

如果是vue2项目，下面先讲解vue2项目如何用

如果安装的时候，报这个错误，有两种方法：

① 降低npm版本，最好6的版本。（自行搜索卸载命令，以及安装指定版本命令）

②（我用的第二种方法）在 后面加上 --legacy-peer-deps ，完整命令如下

接着准备工作已做完，开始引入富文本

先建一个vue组件，这是我建的，在demo页面引入 Editoritem ，单独拿出来可以复用

 在html部分贴上下面的代码

1.  
   <template>
2.  
   <div style="border: 1px solid #ccc;">
3.  
   <Toolbar
4.  
   style="border-bottom: 1px solid #ccc"
5.  
   :editor="editor"
6.  
   :defaultConfig="toolbarConfig"
7.  
   :mode="mode"
8.  
   />
9.  
   <Editor
10.  
    style="height: 500px; overflow-y: hidden;"
11.  
    v-model="html"
12.  
    :defaultConfig="editorConfig"
13.  
    :mode="mode"
14.  
    @onCreated="onCreated"
15.  
    />
16.  
    </div>
17.  
    </template>

在script标签里先引入vue，再引入插件，代码如下，我也引入axios是因为等会本地上传图片，要用到接口，引入的另一个js文件，是我封装的oss上传的方法

引入插件里的组件记着注入，data里边定义了这些变量

 代码贴出来，方便cv

下面先说一些基本配置，写完基本上富文本已经引过来，渲染出来了，这些代码官网上有，主要是我需要的本地上传图片，和本地上传视频两个方法，如果有需要可以继续往下看，如果不需要这两个，可以在工具栏中剔除这两个功能（如何剔除不需要的功能，在文章最后有讲解）

上传图片：（其实上传图片也可以走oss，但我们要求用自己的接口，代码如下）

1.  
   editor.MENU_CONF['uploadImage'] = {
2.  
   async customUpload(file, insertFn) {
3.  
   const isJPG = file.type.split('/')[0] == 'image';
4.  
   if (!isJPG) {
5.  
   that.$message.warning("请上传图片");
6.  
   return
7.  
   }
8.  
   let formData = new FormData();
9.  
   formData.append("img", file);//这里说明一下,因为我们接口要求名字为img,你们接口要求什么可以填什么
10.  
    const configs = {
11.  
    // 上传请求头
12.  
    headers: {
13.  
    'authorization': localStorage.getItem('token'),
14.  
    },
15.  
    // 上传进度
16.  
    onUploadProgress: progressEvent => {
17.  
    let percent = (progressEvent.loaded / progressEvent.total * 100 | 0);
18.  
    },
19.  
    };
20.  
    const res = await axios.post('此处为url', formData, configs);
21.  
    const {data, code} = res.data;
22.  
    if (code == 200) {
23.  
    const alt = (data.split("/")[data.split("/").length - 1]).substring(36);
24.  
    insertFn(data, alt, data); // insertFn 参数1：路径； 参数2：alt值； 参数三：路径
25.  
    } else {
26.  
    that.$message.warning(res.data.msg);
27.  
    }
28.  
    }
29.  
    };

 customUpload(file, insertFn) {}这个方法比较关键,里边的第二个参数里直接放返回的生成后的链接

insertFn(链接)

上传视频,我走的oss,如果你走的是自己的接口,那和上传图片大差不大,需要修改的可能就是把editor.MENU_CONF['uploadImage']换成editor.MENU_CONF['uploadVideo'],还需要把formData.append("img", file);里的img换成video或者file,下面是代码

1.  
   // 视频上传
2.  
   editor.MENU_CONF['uploadVideo'] = {
3.  
   async customUpload(file, insertFn) {
4.  
   console.log(file, insertFn)
5.  
   console.log(editor.MENU_CONF['uploadVideo'])
6.  
   const isJPG = file.type.split('/')[0] == 'video';
7.  
   // const isJPG1 = file.type == 'image/png';
8.  
   if (!isJPG) {
9.  
   that.$message.warning("请上传视频");
10.  
    return
11.  
    }
12.  
    //此处为自行封装的oss上传方法,如果你走的接口,和上边上传图片差不多,注意的是insertFn里还是放返回的视频链接
13.  
    const result = await oss.ossUploadFile({file: file})
14.  
    // console.log(result,result.fileUrl)
15.  
    insertFn(result.fileUrl)
16.  
    }
17.  
    }

走到这富文本已经好了,

下一篇将CDN如何引入以及上传视频上传图片，还有如何剔除不需要的工具

这篇好文章是转载于：学新通技术网