mes-ui-d2/src/components/core/SimpleMDE/index.vue

<template>
  <div class="markdown-editor">
    <textarea ref="mde"></textarea>
  </div>
</template>

<script>
import SimpleMDE from 'simplemde'
export default {
  props: {
    // 值
    value: {
      type: String,
      required: false,
      default: ''
    },
    // 配置参数
    config: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data () {
    return {
      // 编辑器实例
      mde: null,
      // 编辑器默认参数
      // 详见 https://github.com/sparksuite/simplemde-markdown-editor#configuration
      defaultConfig: {
        autoDownloadFontAwesome: false
      }
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  destroyed () {
    // 在组件销毁后销毁实例
    this.mde = null
  },
  methods: {
    // 初始化
    init () {
      // 合并参数
      const config = Object.assign({}, this.defaultConfig, this.config)
      // 初始化
      this.mde = new SimpleMDE({
        ...config,
        // 初始值
        initialValue: this.value,
        // 挂载元素
        element: this.$refs.mde
      })
    }
  }
}
</script>

<style lang="scss">
.markdown-editor {
  .markdown-body {
    padding: 0.5em;
  }
}
.markdown-editor {
  .editor-preview-active {
    display: block;
  }
  .editor-preview-active-side {
    display: block;
  }
}
</style>