vue中使用markdown編輯器代碼詳解

編輯器效果圖

1、安裝插件

cnpm install mavon-editor -S

2、在main.js中引入插件

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

3、在組件中使用< mavon-editor />組件來顯示編輯器（完整代碼可以直接用來測試）

<template>
  <div>
    <mavon-editor
    @save="saveData"
    v-model="mavonValue"
    :codeStyle="codeStyle"/>
    <br>
    <br>
    <button @click="modifyMarkdown">從數據庫（我存在了markData變量中）拿到markdown中的數據進行編輯</button>
    <br>
    <mavon-editor
    v-if="isShowModifyMarkdown"
    v-model="markData"
    :codeStyle="codeStyle"
    />
    <br>
    <br>
    <button @click="showMarkdownUi" >從數據庫（我存在了markData變量中）拿到markdown中的數據進行頁面展示</button>
    <br>
    <div v-if="isShowMarkdownUi">
      <div>這裏是markdown自動轉換爲html的數據：{{htmlData}}</div>
      <br>
      <mavon-editor
      :value="markData"
      :subfield="false"
      defaultOpen='preview'
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :codeStyle="codeStyle"
      />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      codeStyle: 'vs2015', // 代碼風格配色，更多請看 https://github.com/hinesboy/mavonEditor/blob/master/src/lib/core/hljs/lang.hljs.css.js
      isShowModifyMarkdown: false,
      isShowMarkdownUi: false,
      mavonValue: '',
      markData: '', // 保存markdown的原始數據
      htmlData: '' // 保存markdown自動轉換爲html後的數據
    }
  },
  computed: {
    prop () {
      const data = {
        subfield: false, // 單雙欄模式
        defaultOpen: 'preview', // edit： 默認展示編輯區域 ， preview： 默認展示預覽區域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true
      }
      return data
    }
  },
  methods: {
    saveData (value, callback) { // markdown中的保存按鈕
      // 保存數據，用於頁面按鈕操作的顯示
      this.markData = value
      this.htmlData = callback
      console.log(this.markData) // markdown的原始數據
      console.log(this.htmlData) // markdown自動轉換爲html後的數據
    },
    modifyMarkdown () {
      this.isShowModifyMarkdown = true
    },
    showMarkdownUi () {
      this.isShowMarkdownUi = true
    }
  }
}
</script>
<style scoped>
.markdown-body{
  width: 80%;
  height: 400px;
  margin: auto;
}
</style>

4、運行界面效果圖

ps：這個代碼我模擬了編輯器的初始化編輯功能；點擊編輯器的保存按鈕之後保存數據到數據庫（我這裏是存在了變量中），然後可以從數據庫獲取數據來編輯；還可以獲取數據在頁面進行展示這三個功能。

5、參考資料：

官網：https://github.com/hinesboy/mavonEditor

博客：
https://www.jianshu.com/p/aca26ec75ec3
https://blog.csdn.net/yhy1315/article/details/98190327