vue wangEditor5 配置

editorConfigs: {
        toolbarConfig: {},
        editorConfig: {
          placeholder: '请输入正文...',
          MENU_CONF: {}
        },
        mode: 'simple', // 'default'  or 'simple'
      },

created(){
 this.editorConfigs.editorConfig.MENU_CONF.uploadImage = {
      server: this.api_uploadFileUrl,
      maxFileSize: 10 * 1024 * 1024, // 10M
      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
      customUpload(file, insertFn) {
        const obj = new FormData();
        obj.append("files", file);
        api_uploadFile(obj).then(res => {
           // url , filename , href
          insertFn(res.data[0].url, 'res.data[0].name', res.data[0].url)
        })

      }
    }
}

<div style="border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden">
            <Toolbar
              style="border-bottom: 1px solid #dcdfe6"
              :editor="editor"
              :defaultConfig="editorConfigs.toolbarConfig"
              :mode="editorConfigs.mode"
            />
            <Editor
              class="wang-editor"
              v-model="ruleForm.content"
              :defaultConfig="editorConfigs.editorConfig"
              :mode="editorConfigs.mode"
              @onCreated="onEditorCreated"
            />
          </div>

 

所有配置如下： 

 server: 'http://106.12.198.214:3000/api/upload-img', // 上传图片地址
      // server: 'http://106.12.198.214:3000/api/upload-img-10s', // 用于测试 timeout
      // server: 'http://106.12.198.214:3000/api/upload-img-failed', // 用于测试 failed
      // server: 'http://106.12.198.214:3000/api/xxx', // 用于测试 404
 
      timeout: 5 * 1000, // 5s
 
      fieldName: 'custom-fileName',
      meta: { token: 'xxx', a: 100 },
      metaWithUrl: true, // 参数拼接到 url 上
      headers: { Accept: 'text/x-json' },
 
      maxFileSize: 10 * 1024 * 1024, // 10M
 
      base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
 
      onBeforeUpload(files) {
        console.log('onBeforeUpload', files)
 
        return files // 返回哪些文件可以上传
        // return false 会阻止上传
      },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        alert(err.message)
        console.error('onError', file, err, res)
      },
 
      // // 用户自定义插入图片
      // customInsert(res, insertFn) {
      //   console.log('customInsert', res)
      //   const imgInfo = res.data[0] || {}
      //   const { url, alt, href } = imgInfo
      //   if (!url) throw new Error(`Image url is empty`)
 
      //   // 自己插入图片
      //   console.log('自己插入图片', url)
      //   insertFn(url, alt, href)
      // },
 
      // // 用户自定义上传图片
      // customUpload(file, insertFn) {
      //   console.log('customUpload', file)
 
      //   return new Promise((resolve) => {
      //     // 插入一张图片，模拟异步
      //     setTimeout(() => {
      //       const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
      //       insertFn(src, '百度 logo', src)
      //       resolve('ok')
      //     }, 500)
      //   })
      // },
 
      // // 自定义选择图片（如图床）
      // customBrowseAndUpload(insertFn) {
      //   alert('自定义选择图片，如弹出图床')
 
      //   // 插入一张图片，模拟异步
      //   setTimeout(() => {
      //     const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
      //     insertFn(src, '百度 logo', src) // 插入图片
      //   }, 500)
      // },