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

分手后的思念是犯贱 2023-01-20 05:55 38阅读 0赞

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

官方示例：[https://www.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内的代码看似重复，但是这个是在富文本内的值在不断变化时，设置值的操作。。。非常有用！！！

[https_doc.wangeditor.com]: https://doc.wangeditor.com/
[https_www.wangeditor.com]: https://www.wangeditor.com/