wangEditor编辑器的使用(上传图片/禁用/初始化等)

官方文档：https://doc.wangeditor.com/

官方示例：https://www.wangeditor.com/

 

这里需要先创建富文本，但是有其他操作，例如给富文本设置数据，修改数据，禁用富文本，可编辑，图片上传，根据不同的状态禁用，数据也是

不断变化，同时需要获取数据等操作。。。

 

父组件使用wangeditor

子组件的文件名为：wangEditor.vue

使用的为vue

 

在使用wangEditor之前需要先进行安装  

npm i wangeditor --save

在安装完成后需要导入才能使用：

import E from 'wangeditor'

在开发时，需要将wangeditor作为组件进行开发，新建文件，在文件内的部分是整个编辑器的内容（如果在你 需要使用的文件内添加，无法展示。也有可能是自己代码问题确实无法展示），在使用编辑器时引入即可。

一、创建

在使用的时候，需要先创建编辑器，可以看到标签很简单，需要挂载

this.editor = new E(this.$refs.editorElem)

this.editor.create()

这一部分已经创建完成了编辑器。

二、上传图片

需要服务器支持上传图片操作，因为需要上传到其他的服务器 ，手动配置

1.配置服务端接口

this.editor.config.uploadImgServer = 'https://xxx'   // 这里替换链接

接口需要返回json数据格式

2.配置参数和请求头

因为上传图片时需要token，这两个方法都有试过，均可。

//自定义参数
// this.editor.config.uploadParams = {
//   token: this.token,
// }

//自定义请求头
this.editor.config.uploadImgHeaders= {
  'X-Access-Token': this.token,
}

这个自定义上传图片图片的名称为 file

this.editor.config.uploadFileName = 'file'

3.自己上传

这里使用自己上传的原因是，在上述的几个操作添加完后，还是有上传失败的报错，然后经过搜索，看到了别人的写法

this.editor.config.customUploadImg = function (files, insert) {}

自己上传写在这个里面，上传并且拿到响应得到的图片 https://image....链接，表示上传成功。

insert(imgUrl)

成功之后，要把这个东西添加到富文本内。拿到值之后，需要将值传递给父组件。

4.设置内容

this.editor.txt.html()

5.禁用

this.editor.disable()

6.启用

this.editor.enable()

三、给父组件传值

这里需要把值传递给父组件，通过onchange（均为小写）事件，每次改变会获取其html内容

// 子组件内
this.editor.config.onchange = (html) => {
  this.$emit('catchData', html)     // 给父组件传递文本数据
}

父组件：

先引入组件，引入后需要注册组件，在最后的全量代码有

import wangEditor from './wangEditor'

<wang-editor
	:disabled="notEditBasicInfo"
	style="position: relative; z-index: 0"
	@catchData="catchData"
	:explanation="explanation"
	v-model="explanation"
></wang-editor>

可以看到这里父组件给子组件传递的参数：disabled，explanation

子组件给父传递的数据：在catchData里

这里的父子组件传参就不细说了

详细的基本上就完了。。。。

 

组件 wangEditor.vue 的全部代码：

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align: left"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
import Vue from 'vue'
import { axios } from '@/utils/request'
export default {
  name: 'Editor',
  data() {
    return {
      editor: null,
      token: 'aaa',  // 需要获取token赋值
    }
  },
  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
  props: {
    explanation: '',
    disabled: '',
  }, // 接收父组件的方法
  mounted() {
    this.editor = new E(this.$refs.editorElem)
    // 上传图片路径
    this.editor.config.uploadImgServer = 'https://xxx'
    // this.editor.config.uploadParams = {
    //   token: this.token,
    // }
    this.editor.config.uploadImgHeaders = {
      'X-Access-Token': this.token,
    }
    this.editor.config.uploadFileName = 'file'
    this.editor.config.customUploadImg = function (files, insert) {
      const formData = new FormData()
      formData.append('file', files[0])
      axios({
        //上传图片到后台
        method: 'post',
        url: 'https://xxx',
        data: formData,
      }).then((res) => {
        console.log('resresresres', res)
        if (res.success) {
          console.log(res.result)
          var imgUrl = res.result.visiturl //后台返回的文件路径
          insert(imgUrl) //生成img标签并插入文章中
        } else {
          res.message && this.$message.error(res.message)
        }
      })
      // insert 是获取图片 url 后，插入到编辑器的方法
      // 上传代码返回结果之后，将图片插入到编辑器中
    }

    // 编辑器的事件，每次改变会获取其html内容
    this.editor.config.onchange = (html) => {
      this.$emit('catchData', html)
    } //把这个html通过catchData的方法传入父组件

    // this.editor.config.menus = [
    //   // 菜单配置
    //   'head', // 标题
    //   'bold', // 粗体
    //   'fontSize', // 字号
    //   'fontName', // 字体
    //   'italic', // 斜体
    //   'underline', // 下划线
    //   'strikeThrough', // 删除线
    //   'foreColor', // 文字颜色
    //   'backColor', // 背景颜色
    //   'link', // 插入链接
    //   'list', // 列表
    //   'justify', // 对齐方式
    //   'quote', // 引用
    //   'emoticon', // 表情
    //   'image', // 插入图片
    //   'table', // 表格
    //   'code', // 插入代码
    //   'undo', // 撤销
    //   'redo' // 重复
    // ];

    this.editor.create() // 创建富文本实例
    console.log('this.disabled', this.disabled)

    // this.editor.txt.html(this.explanation)
    if (this.explanation == undefined || this.explanation == '' || this.explanation == null) {
      let a = ''
      this.editor.txt.html(a)
    } else {
      this.editor.txt.html(this.explanation)
    }

    if (this.disabled) {
      this.editor.disable()
    } else {
      this.editor.enable()
    }
  },
  watch: {
    explanation(val) {
      if (val == undefined || val == '' || val == null) {
        let a = ''
        this.editor.txt.html(a)
      } else {
        this.editor.txt.html(val)
      }
    },
    disabled() {
      if (this.disabled) {
        this.editor.disable()
      } else {
        this.editor.enable()
      }
    },
  },
}
</script>

watch内的代码看似重复，但是这个是在富文本内的值在不断变化时，设置值的操作。。。非常有用！！！