felicityyin
关注
66233 号成员,2021-03-20 17:34:48 加入
247
个人主页 浏览
18h57m
在线时长
  • 如何更改图片大小

    2021-10-07 11:08

    多谢

  • 表格中字体的颜色是灰色的

    2021-03-22 10:06

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

  • 如何进行图片粘贴上传?

    2021-03-22 10:04

    前端这样写:

    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

  • Vditor 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式

    2021-03-21 23:24

    在 after 里调用:

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

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

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

  • 如何加载的时候就是预览模式

    2021-03-21 22:30

    在 after 调用,有效果:

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

  • 如何加载的时候就是预览模式

    2021-03-21 17:38

    试过了多种方式,都没有用 ~

    方式 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"

  • 如何进行图片粘贴上传?

    2021-03-21 15:09

    好的,多谢

  • 表格中字体的颜色是灰色的

    2021-03-21 15:08

    好的,多谢

  • vditor 编辑器 setValue 方法不能设置默认文本

    2021-03-21 11:15

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