vue中使用Markdown编辑器

项目使用的是vue-element-admin作为后台解决方案，推荐的是tui.editor作为编辑器，但是有一个不好的点，就是预览不能很好的兼容。

所以我更推荐 tui-editor的分支版本，toast-ui.vue-editor,它能在vue中更好的兼容，使用起来也很简单。
想了解更多内容或者API，前往官网了解详情：GitHub - nhn/toast-ui.vue-editor: This repository is DEPRECATED! GO TO 👉 https://github.com/nhn/tui.editor/tree/master/apps/vue-editor

例子

组件使用

// markdown.vue
<template>
    <div>
    <markdown-editor v-model="content" />
    </div>
</template>

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

export default {
  components: { MarkdownEditor },
  data() {
    return {
      content: '',
    }
  }
}
</script>

封装的vue组件

src
|-----components
|       |-----MarkdownToastUIEditor
|                |----default-options.js
|                |----index.vue
|-----views
       |---XXXX/markdorn.vue(项目中某个模块中使用)

index.vue文件

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

<script>
// deps for editor
// https://github.com/nhn/toast-ui.vue-editor
import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's 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
      })
      // 注释掉：防止监听页面创建时，监听的input时间被触发，控制台会报错getValue事件的的错误
      // if (this.value) {
      //   this.editor.setMarkdown(this.value)
      // }
      this.editor.setMarkdown(this.value)
      this.editor.on('change', () => {
        this.$emit('input', this.editor.getMarkdown())
      })
    },
    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>

<style lang="scss" scoped>

</style>

default-options.js文件

// 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,
  placeholder: '',
  toolbarItems: [
    'heading',
    'bold',
    'italic',
    'strike',
    'divider',
    'hr',
    'quote',
    'divider',
    'ul',
    'ol',
    'task',
    'indent',
    'outdent',
    'divider',
    'table',
    'image',
    'link',
    'divider',
    'code',
    'codeblock'
  ]
}