vue富文本-wangeditor的安装使用并且上传图片至oss代码

1 .vue中安装wangEditor

npm 安装 :npm install wangeditor --save

2.创建公用组件

在components中创建awangeditor文件夹,组件内容为

<template>
  <div>
    <div ref="editor" :style="{width: width + 'px'}" />
  </div>
</template>

<script>
import E from 'wangeditor'
import OSS from 'ali-oss'
import config from '@assets/config.json'
export default {
  name: 'Editor',
  props: {
    value: '', 
    width: {
      type: Number,
      default: 400
    }, 
  },
  data () {
    return {
      client: null 
    }
  },
  watch: {
    value (val) {
      console.log(val)
    }
  },
  mounted () {
    this.client = new OSS(config.oss)
    this.update()
  },
  methods: {
    fileName (str, type) {
      const year = new Date().getFullYear()
      var month = new Date().getMonth()
      const time = new Date().getTime()
      if (month < 9) {
        month = '0' + (month + 1)
      } else {
        month = month + 1
      }
      const prefix = `/${config.oss.bucket}/${type}` // 文件前缀
      // 返回随机数 n是取值几位数
      let res = ''
      for (
        ;
        res.length < 5;
        res += Math.random().toString(36).substr(2).toUpperCase()
      ) { }
      const random = res.substr(0, 5)
      const name = `${prefix}/${year}${month}/${time}${random}.${str}`
      return name.toLocaleLowerCase()
    }, 
    update () {
      const editor = new E(this.$refs.editor)
      editor.txt.clear()
      //   editor.config.menus = [
      //     'bold', // 粗体
      //     'fontSize', // 字号
      //     'fontName', // 字体
      //     'italic', // 斜体
      //     'underline', // 下划线
      //     'strikeThrough', // 删除线
      //     'foreColor', // 文字颜色
      //     'link', // 插入链接
      //     'list', // 列表
      //     'justify', // 对齐方式
      //     'quote', // 引用
      //     'image', // 插入图片
      //     'location' // 位置
      //   ]
      editor.config.onchange = (text) => { 
        console.log('input', text)
        // editor.txt.clear()
        this.$emit('input', text)
      }
      const that = this
      editor.config.uploadImgServer = '图片上传地址'
      editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 将图片大小限制为 10M
      editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
      editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片
      editor.config.showLinkImg = false // 隐藏网络图片上传

      editor.config.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // 上传代码返回结果之后，将图片插入到编辑器中
        // insert(imgUrl)
        // imgsNum： 已存在的图片  uploadImgNum : 上传的图片
        // if (this.imgsNum + this.uploadImgsNum > 10) {
        //   this.$alert('已上传图片超过最大的数量限制!')
        //   return
        // }
        console.log('files', files[0])
        const file = files[0]
        const str = file.name.substring(
          file.name.lastIndexOf('.') + 1,
          file.name.length
        )
        const storeAs = that.fileName(str, 'file')
        // 上传文件,这里是上传到OSS的 uploads文件夹下
        that.client.put(storeAs, file).then((res) => {
          if (res.res.statusCode === 200) {
            res.imgUrl = config.staticUrl + '/' + res.name
            insert(res.imgUrl) // 插入地址
          }
        })
      }

      //   editor.config.uploadImgHooks = {
      //     fail: (xhr, editor, result) => {
      //       debugger
      //       // 插入图片失败回调
      //       console.log(result)
      //     },
      //     success: (xhr, editor, result) => {
      //       debugger
      //       // 图片上传成功回调
      //       console.log(result)
      //     },
      //     timeout: (xhr, editor) => {
      //       debugger
      //       // 网络超时的回调
      //       console.log('网络超时')
      //     },
      //     error: (xhr, editor) => {
      //       debugger
      //       // 图片上传错误的回调
      //       console.log('上传错误')
      //     },
      //     // 回显
      //     customInsert: (insertImg, result, editor) => {
      //       console.log(result)
      //       const id = result.data.fileId
      //       const a = result.data.fileName.split('.')[1]
      //       const str = id + '/' + a
      //       const url =
      //           '图片下载地址？fileId=' +
      //           str
      //       insertImg(url)
      //     }
      //   }
      editor.zIndex.baseZIndex = 8; //方法
      editor.create()

      console.log(this.value)
      // editor.txt.html('<p>' + this.value + '</p>')
      editor.txt.html(this.value)
    }
  }
}
</script> 
<style scoped>
</style>

3. 在父组件中调用

<template>
<div>
   <editor  v-model="thanks"  @input="input" />
</div>
</template>
 
import editor from '@/components/awangeditor/index.vue'
components: { editor },
data() {
      return {
      thanks: '',
        }
      },  
methods: {
  change(val) {
      console.log(val)
      
    },
    input(e) {
      console.log(e)
        this.thanks = e
    }
 }