多谢

是被 App.vue 中的样式覆盖了

前端这样写：

initVditor() {
      const that = this
      const options = {
        cache: {
          enable: true,
        },
        mode: 'ir',
        height: this.height,  // 编辑器总高度
        theme: 'dark',  // 编辑器主题
        preview: {
          delay: 100,
          show: !this.isMobile,
          theme: {
            current: 'dark'  // 内容主题
          },
          hljs: {
            enable: true,  // 代码高亮
            style: 'vim',  
            lineNumber: true
          },
          outline: {  // 显示大纲
            enable: true
          },
          // markdown: {
          //   toc: true  // 展示目录
          // }
        },
        toolbarConfig: {
            pin: false,  // 是否固定工具栏
        },
        after: () => {
          if (this.content) {
            this.vditor.setValue(this.content)
          }
        },
        upload: {
          url: process.env.WEB_API + '/file/upload',
          max: 5 * 1024 * 1024,
          linkToImgUrl: process.env.WEB_API + '/file/upload',
          handler(files) {
            let formData = new FormData()
            for (let i = 0; i < files.length; i++) {
              formData.append('file', files[i])
            }
            let request = new XMLHttpRequest()
            // 图片上传路径
            request.open('POST', process.env.WEB_API + '/file/upload')
            request.onload = that.onloadCallback 
            request.send(formData)
          }
        }
      }
      this.vditor = new Vditor('vditor', options)
      return this.vditor
    },
    onloadCallback(oEvent) {
      const currentTarget = oEvent.currentTarget
      console.log("返回的结果", currentTarget)
      if (currentTarget.status !== 200) {
        return this.$message({
          type: 'error',
          message: currentTarget.status + ' ' + currentTarget.statusText
        })
      }

      let resp = JSON.parse(currentTarget.response)
      let imgMdStr = ''
  
      if (resp.Code === Code.SUCCESS) {
        imgMdStr = `![${'img'}](${resp.Data.ImgUrl})`
      } else {
        return this.$message({
          type: 'error',
          message: resp.Msg
        })
      }
      this.vditor.insertValue(imgMdStr)
    },
​

后端接接收到图片后可以保存到本地或上传到云存储，然后返回图片的 URL

在 after 里调用：

var evt = document.createEvent('Event');

evt.initEvent('click', true, true);

this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt);

在 after 调用，有效果：

var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt);

试过了多种方式，都没有用 ～

方式 1：

evt.initEvent('click',true,true);
console.log(this.vditor.vditor.toolbar.elements.preview.firstElementChild)
this.vditor.vditor.toolbar.elements.preview.firstElementChild.dispatchEvent(evt);

方式 2：

document.querySelector(".vditor-preview").style.display = "block"

document.querySelector(".vditor-wysiwyg").style.display = "none"

好的，多谢

好的，多谢

mark

你可能是在创建 vditor 的时候调用了这个方法，应该是在创建完以后调用。