$ npm i le-markdown-editor --save

import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'
// ...

Vue.use(leMarkdownEditor)
// ....
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

<div id="app">
  <div id="editor-main">
        <le-editor v-model="value" :hljs-css="hljsCss" :image-uploader="imageUploader" @save="save"></le-editor>
  </div>
</div>

<script>
  export default {
    // ...
    data() {
      return {
        hljsCss: 'agate',
        value: '这里放markdown内容',
        // 自定义
        imageUploader: {
          custom: false,
          fileType: 'file',
          fileNameType: '',
          imagePrefix: 'http://106.54.92.121', // 图片上传成功后，预览地址前缀
          type: 'server',
          url: 'http://106.54.92.121:82/upload' // 上传接口地址
        }
      }
    },
    methods: {
      // 自定义图片上传
      // uploadImg: function ($vm, file, fileName) {
      //   console.log($vm)
      //   console.log(file)
      //   console.log(fileName)
      //   // 添加图片
      //   // 两个参数 第一个是图片访问路径 第二个是文件名
      //   $vm.insertImg(`${$vm.config.imageUploader.imagePrefix}${fileName}`, fileName)
      // },
      save: function (val) {
        // 获取预览文本
        console.log(this.value) // 这里是原markdown文本
        console.log(val) // 这个是解析出的html
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss">
  #app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
  }

  #editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

<div id="app">
    <div id="main">
        <!--    <h2>通过html方式显示</h2>-->
        <!--    <le-preview ref="html-preview" :value="html" :hljs-css="hljsCss"></le-preview>-->
        <h2>通过markdown方式显示</h2>
        <le-preview ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
     </div>
</div>

<script>
  export default {
    // ...
    data() {
      return {
        hljsCss: 'agate',
        html: '这里放html文本',
        mdContent: '这里放markdown文本'
      }
    },
    methods: {},
  }
</script>

<style>
  #app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
  }

  #main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

npm i le-markdown-editor --save

import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'

Vue.use(leMarkdownEditor)

// ...
plugins: [
  '@/plugins/view-ui',
  '@/plugins/le-markdown-editor',
],
//...

<template>
  <div class="container">
    <div id="editor-main">
      <le-editor v-model="value" :hljs-css="hljsCss" :fullscreen="true" :image-uploader="imageUploader" @save="save"></le-editor>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hljsCss: 'agate',
        value: '这里放markdown内容',
        // 自定义
        imageUploader: {
          custom: false,
          fileType: 'file',
          fileNameType: '',
          imagePrefix: 'http://106.54.92.121', // 图片上传成功后，预览地址前缀
          type: 'server',
          url: 'http://106.54.92.121:82/upload' // 上传接口地址
        }
      }
    },
    methods: {
      // 自定义图片上传
      // uploadImg: function ($vm, file, fileName) {
      //   console.log($vm)
      //   console.log(file)
      //   console.log(fileName)
      //   // 添加图片
      //   // 两个参数 第一个是图片访问路径 第二个是文件名
      //   $vm.insertImg(`${$vm.config.imageUploader.imagePrefix}${fileName}`, fileName)
      // },
      save: function (val) {
        // 获取预览文本
        console.log(this.value) // 这里是原markdown文本
        console.log(val) // 这个是解析出的html
      }
    },
    mounted() {
    }
  }
</script>

<style>
  .container {
    margin: 0 auto;
    width: 1200px;
    height: 500px;
  }

  #editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }
</style>

// 默认菜单栏配置
toolbar: {
    undo: true, // 撤销
    redo: true, // 重做
    bold: true, // 粗体
    del: true, // 删除线
    underline: true, // 下划线
    italic: true, // 斜体
    quote: true, // 引用
    bookmark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    h1: true, // 标题1
    h2: true, // 标题2
    h3: true, // 标题3
    h4: true, // 标题4
    h5: true, // 标题5
    h6: true, // 标题6
    alignLeft: true, // 居左
    alignCenter: true, // 居中
    alignRight: true, // 居右
    ol: true, // 有序列表
    ul: true, // 无序列表
    hr: true, // 分隔线
    link: true, // 链接
    inlineCode: true, // 行内代码
    code: true, // 代码块
    image: true, // 图片
    table: true, // 表格
    skin: true, // 皮肤
    fullScreenEdit: true, // 全屏编辑
    fullScreen: true, // 全窗口预览
    preview: true,  // 实时预览
    save: true,  // 保存预览的html文本
  }
// 使用(例如按照下图的配置，只会显示两个图标)
<template>
  <div id="app">
    <le-editor :toolbar="toolbar"></le-editor>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
        toolbar: {
            undo: true,
            redo: true
        }
    }
  }
}
</script>

a11yDark
a11yLight
agate
anOldHope
androidstudio
arduinoLight
arta
ascetic
atelierCaveDark
atelierCaveLight
atelierDuneDark
atelierDuneLight
atelierEstuaryDark
atelierEstuaryLight
atelierForestDark
atelierForestLight
atelierHeathDark
atelierHeathLight
atelierLakesideDark
atelierLakesideLight
atelierPlateauDark
atelierPlateauLight
atelierSavannaDark
atelierSavannaLight
atelierSeasideDark
atelierSeasideLight
atelierSulphurpoolDark
atelierSulphurpoolLight
atomOneDarkReasonable
atomOneDark
atomOneLight
brownPaper
codepenEmbed
colorBrewer
darcula
dark
darkula
default
docco
dracula
far
foundation
githubGist
github
gml
googlecode
gradientDark
grayscale
gruvboxDark
gruvboxLight
hopscotch
hybrid
idea
irBlack
isblEditorDark
isblEditorLight
'kimbie.dark'
'kimbie.light'
lightfair
magula
monoBlue
monokaiSublime
monokai
nightOwl
nord
obsidian
ocean
paraisoDark
paraisoLight
pojoaque
purebasic
qtcreatorDark
qtcreatorLight
railscasts
rainbow
routeros
schoolBook
shadesOfPurple
solarizedDark
solarizedLight
sunburst
tomorrowNightBlue
tomorrowNightBright
tomorrowNightEighties
tomorrowNight
tomorrow
vs
vs2015
xcode
xt256
zenburn

W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。