解决 vue-element-admin Markdown 编辑器右侧不正常显示并支持第三方图片上传

升级

升级依赖

方法一

直接修改 package.json 文件，删除 "tui-editor": "1.3.3", ，添加 "@toast-ui/editor": "^3.1.0", 。修改完成后重新执行安装依赖。

方法二

直接运行命令：

npm uninstall tui-editor
npm install @toast-ui/editor@3.1.0

文件修改

1. 修改 src\components\MarkdownEditor\index.vue

这里主要是修改依赖，Markdown 和 HTML 的获取与设置，增加第三方图片上传处理的代码。

修改前	修改后
this.editor.getValue	this.editor.getMarkdown
this.editor.setValue	this.editor.setMarkdown
this.editor.getHtml	this.editor.getHTML
this.editor.setHtml	this.editor.setHTML

<template>
  <div :id="id" />
</template>

<script>
// deps for editor
import 'codemirror/lib/codemirror.css' // codemirror
import '@toast-ui/editor/dist/toastui-editor.css' // editor style

import Editor from '@toast-ui/editor'
import defaultOptions from './default-options'

export default {
  name: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    options: {
      type: Object,
      default() {
        return defaultOptions
      }
    },
    mode: {
      type: String,
      default: 'markdown'
    },
    height: {
      type: String,
      required: false,
      default: '300px'
    },
    language: {
      type: String,
      required: false,
      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
    }
  },
  data() {
    return {
      editor: null
    }
  },
  computed: {
    editorOptions() {
      const options = Object.assign({}, defaultOptions, this.options)
      options.initialEditType = this.mode
      options.height = this.height
      options.language = this.language
      return options
    }
  },
  watch: {
    value(newValue, preValue) {
      if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
        this.editor.setMarkdown(newValue)
      }
    },
    language(val) {
      this.destroyEditor()
      this.initEditor()
    },
    height(newValue) {
      this.editor.height(newValue)
    },
    mode(newValue) {
      this.editor.changeMode(newValue)
    }
  },
  mounted() {
    this.initEditor()
  },
  destroyed() {
    this.destroyEditor()
  },
  methods: {
    initEditor() {
      this.editor = new Editor({
        el: document.getElementById(this.id),
        ...this.editorOptions
      })
      if (this.value) {
        this.editor.setMarkdown(this.value)
      }
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getMarkdown())
      })
      this.editor.addHook('addImageBlobHook', (file, cb) => {
        if (typeof this.$listeners.uploadImageEvent === 'function') {
          this.$emit('uploadImageEvent', file, cb)
        } else {
          const reader = new FileReader()
          reader.onload = ({ target }) => { cb(target.result || '') }
          reader.readAsDataURL(file)
        }
      })
    },
    destroyEditor() {
      if (!this.editor) return
      this.editor.off('change')
      this.editor.remove()
    },
    setValue(value) {
      this.editor.setMarkdown(value)
    },
    getValue() {
      return this.editor.getMarkdown()
    },
    setHtml(value) {
      this.editor.setHTML(value)
    },
    getHtml() {
      return this.editor.getHTML()
    }
  }
}
</script>

2. 修改 src\components\MarkdownEditor\default-options.js

相对于 v2 版本来说，新的 v3 版本通过数组进行分组，所以这里只需要将对应的内容分组即可。

// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
export default {
  minHeight: '200px',
  previewStyle: 'vertical',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,
  hideModeSwitch: false,
  toolbarItems: [
    ['heading', 'bold', 'italic', 'strike'],
    ['hr', 'quote'],
    ['ul', 'ol', 'task', 'indent', 'outdent'],
    ['table', 'image', 'link'],
    ['code', 'codeblock']
  ]
}

支持第三方图片上传

在使用 Markdown 编辑器的位置添加事件监听 uploadImageEvent ，然后在监听中进行第三方图片上传操作，最后通过在回调中传入图片的地址即可在编辑器中插入对应的图片。

<template>
  <div class="markdown">
      <markdown-editor v-model="content" :options="{ toolbarItems: [['heading','bold','italic'], ['image']]}" @uploadImageEvent="uploadImage" />
  </div>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor'

const content = `
**This is test**

* vue
* element
* webpack

`
export default {
  name: 'MarkdownDemo',
  components: { MarkdownEditor },
  data() {
    return {
      content: content
    }
  },
  methods: {
    // Custom picture upload
    uploadImage(file, callback) {
      const reader = new FileReader()
      reader.onload = ({ target }) => { callback(target.result || '') }
      reader.readAsDataURL(file)
    }
  }
}
</script>