vue项目使用Markdow编辑器详解

源码

tips：

第一点：编辑器是带有顶部工具栏的，默认是在线获取FontAwesome
但是在国内要么访问慢，要么访问不了，所以需要再配置中设置自动下载字体图标为false
autoDownloadFontAwesome: false
然后再组件中引入FontAwesome

第二点：根据自己的需求做个性化设置，我本地调试的时候，引用样式不管用
所以我直接就把这个功能给取消了，没有在配置中取消（因为没找到方法）而是直接覆盖了样式

1.安装引入

npm install simplemde --save    //markdown编辑器
npm install font-awesome --save    //FontAwesome字体图标
npm install showdown --save    //转换markdown语法

2.新建markdown组件

//html
<template>
  <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
    <textarea :id="id">
    </textarea>
  </div>
</template>

//js
import 'font-awesome/css/font-awesome.min.css'
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from 'simplemde'
export default {
  data () {
    return {
      simplemde: null,
      hasChange: false
    }
  },
  props: {
    value: String,
    id: {
      type: String
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    },
    zIndex: {
      type: Number,
      default: 10
    },
    toolbar: {
      type: Array
    }
  },
  watch: {
    value(val) {
      console.log(val)
      if (val === this.simplemde.value() && !this.hasChange) return
      this.simplemde.value(val)
    }
  },
  mounted() {
    this.simplemde = new SimpleMDE({
      element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
      autoDownloadFontAwesome: false,
      autofocus: this.autofocus,
      toolbar: this.toolbar,
      spellChecker: false,
      insertTexts: {
        link: ['[', ']( )']
      },
      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
      placeholder: this.placeholder
    })
    if (this.value) {
      this.simplemde.value(this.value)
    }
    this.simplemde.codemirror.on('change', () => {
      if (this.hasChange) {
        this.hasChange = true
      }
      this.$emit('input', this.simplemde.value())
    })
  },
  destroyed() {
    this.simplemde.toTextArea()
    this.simplemde = null
  }
}

//css    根据自己的需求覆盖原样式
.simplemde-container>>>.CodeMirror {
  min-height: 150px;
  line-height: 20px;
}
.simplemde-container>>>.CodeMirror-scroll {
  min-height: 150px;
  max-height:200px;
}
.simplemde-container>>>.CodeMirror-code {
  padding-bottom: 40px;
}
.simplemde-container>>>.editor-statusbar {
  display: none;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-link {
  color: #1890ff;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-string.cm-url {
  color: #2d3b4d;
}
.simplemde-container>>>.CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
  padding: 0 2px;
  color: #E61E1E;
}
.simplemde-container >>> .editor-toolbar.fullscreen,
.simplemde-container >>> .CodeMirror-fullscreen {
  z-index: 1003;
}
.simplemde-container >>> .fa-columns,
.simplemde-container >>> .fa-arrows-alt,
.simplemde-container >>> .fa-eye,
.simplemde-container >>> .fa-question-circle,
.simplemde-container >>> .separator,
.simplemde-container >>> .fa-quote-left{
  display:none;
}

3.在页面中引入组件并使用

<template>
  <div class="components-container">
    <div class="editor-container">
      <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
    </div>
    <button @click="markdown2Html">To HTML</button>
    <div v-html="html"></div>
  </div>
</template>

<script>
import MarkdownEditor from '@/components/markDown'
const content = `
**this is test**
* vue
* element
1. markdown
2. editor
## Simplemde
[link](https://www.baidu.com) 
![图片](https://i.imgur.com/sZlktY7.png)
`
export default {
  components: { MarkdownEditor },
  data () {
    return {
      content: content,
      html: ''
    }
  },
  methods: {
    markdown2Html() {
      import('showdown').then(showdown => {
        const converter = new showdown.Converter()
        this.html = converter.makeHtml(this.content)
      })
    }
  }
}
</script>

最终效果图

最终效果图