wangEditor,使用以及本地图片上传

2020-03-31  本文已影响0人  无花无酒_3cd3

npm install wangeditor --save 用npm时要全小写

vue中引入

<template>
  <div ref="editor"
           style="text-align:left"></div>
</template>
<script>
import E from 'wangeditor'
export default {
  data () {
    return {
      editor: ''
    }
  },
  components: {},
  methods: {
    createEditor () {//初始化方法
        console.log(this.$refs.editor)
        this.editor = new E(this.$refs.editor)
       this.editor.customConfig.uploadImgServer = '/'// 配置本地上传功能,顺便写的
        //通过下面的方法重写
      this.editor.customConfig.customUploadImg = function (files, insert) {
         var formdata = new FormData()
         formdata.append('ext', _this.imgExt)
          formdata.append('uploadfile', files[0])
        var xhr = new XMLHttpRequest()
  
        xhr.open('POST', HostNameBASE_APIHIS)// 线上地址

        xhr.send(formdata)
        xhr.onreadystatechange =  function () {
                  if (xhr.readyState === 4 && xhr.status === 200) {
                       insert(res)//参数是一个url
                  }
            }
      }

        this.editor.create()
     },
     getContent () { // editor内容
        console.log(this.editor.txt.html())
        console.log(this.editor.txt.text())
      }
  }
}
</script>

https://www.kancloud.cn/wangfupeng/wangeditor3/455792

上一篇下一篇

猜你喜欢

热点阅读