使用

defaultOptions 参数

  minHeight: '200px',
  previewStyle: 'vertical',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,
  hideModeSwitch: false,
  toolbarItems: [
    'heading',
    'bold',
    'italic',
    'strike',
    'divider',
    'hr',
    'quote',
    'divider',
    'ul',
    'ol',
    'task',
    'indent',
    'outdent',
    'divider',
    'table',
    // 'image',
    'link',
    'divider',
    'code',
    'codeblock'
  ]

封装

<div> <div :id="id"/> <input ref="files" style="display: none" type="file" accept="image/*" @change="uploadFile"></div>

初始化

 initEditor() {
      const self = this
      this.editor = new Editor({
        el: document.getElementById(this.id),
        hooks: {
        // 截图上传方法hook
          addImageBlobHook: function(file, callback) {
            function callback_for_image_upload(image_url) {
            // 回调
              callback(image_url, 'image')
            }
            self.upload_file_with_callback(file, callback_for_image_upload)
          }
        },
        ...this.editorOptions
      })
      if (this.value) {
        this.editor.setValue(this.value)
      }
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getValue())
      })
      const toolbar = this.editor.getUI().getToolbar()
      const fileDom = this.$refs.files
      // 添加事件
      this.editor.eventManager.addEventType('uploadEvent')
      this.editor.eventManager.listen('uploadEvent', () => {
        fileDom.click()
      })
      // 添加自定义按钮 第二个参数代表位置，不传默认放在最后
      toolbar.addButton({
        name: 'customize',
        className: 'tui-image',
        event: 'uploadEvent',
        tooltip: '插入图片'
      }, 5)
    },

图片上传 以回调处理

    upload_file_with_callback(file, callback_for_image_upload) {
      const formData = new FormData()
      formData.append('file_upload', file)
      upload(formData).then(response => {
        const imgUrl = process.env.VUE_APP_BASE_API + '/' + response.data
        // this.addImgToMd(imgUrl)
        callback_for_image_upload(imgUrl)
      })
    },
    uploadFile(e) {
      const target = e.target
      const file = target.files[0]
      const formData = new FormData()
      formData.append('file_upload', file)
      upload(formData).then(response => {
        const imgUrl = process.env.VUE_APP_BASE_API + '/' + response.data
        this.addImgToMd(imgUrl)
      })
      target.value = ''// 这个地方清除一下不然会有问题
    },
    // 添加图片到markdown
    addImgToMd(data) {
      const editor = this.editor.getCodeMirror()
      const editorHtml = this.editor.getCurrentModeEditor()
      const isMarkdownMode = this.editor.isMarkdownMode()
      if (isMarkdownMode) {
        editor.replaceSelection(`![img](${data})`)
      } else {
        const range = editorHtml.getRange()
        const img = document.createElement('img')
        img.src = `${data}`
        img.alt = 'img'
        range.insertNode(img)
      }
    }

tui-editor 版本1.4.10