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

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

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

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

​

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

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

npm install @wangeditor/editor --save --legacy-peer-deps
npm install @wangeditor/editor-for-vue --save --legacy-peer-deps

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

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

​

 在html部分贴上下面的代码

<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

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

import Vue from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import axios from "axios";
import oss from "./ossjs_wangeditor";

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

​

 代码贴出来，方便cv

components: {Editor, Toolbar},
  data() {
    return {
      editor: null,
      // html: '<p>hello</p>',
      html: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple'
    }
  },

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

​

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

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

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

insertFn(链接)

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

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

走到这富文本已经好了,

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