美文网首页
wangEditor,使用以及本地图片上传

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

作者: 无花无酒_3cd3 | 来源:发表于2020-03-31 15:25 被阅读0次

    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

    相关文章

      网友评论

          本文标题:wangEditor,使用以及本地图片上传

          本文链接:https://www.haomeiwen.com/subject/sdwwuhtx.html