Vue項目引入markdown編輯器

只需要簡單的幾步：
1.使用npm安裝

npm install mavon-editor --save-dev

2.在main.js中導入

import mavonEditor from 'mavon-editor';     //markdown編輯器
import 'mavon-editor/dist/css/index.css';

然後

Vue.use(mavonEditor);

3.在組件中使用

<mavon-editor v-model="content" :toolbars="toolbars" @keydown="" style=""/>

data中配置markdown編輯器的功能

toolbars: {
	bold: true, // 粗體
	italic: true, // 斜體
	header: true, // 標題
    underline: true, // 下劃線
    mark: true, // 標記
    superscript: true, // 上角標
    quote: true, // 引用
    ol: true, // 有序列表
    ink: true, // 鏈接
    imagelink: true, // 圖片鏈接
    help: true, // 幫助
    code: true, // code
    subfield: true, // 是否需要分欄
    fullscreen: true, // 全屏編輯
    readmodel: true, // 沉浸式閱讀
    /* 1.3.5 */
    undo: true, // 上一步
    trash: true, // 清空
    save: true, // 保存（觸發events中的save事件）
    /* 1.4.2 */
    navigation: true // 導航目錄
}

這樣就可以使用了