簡(jiǎn)介

mavon-editor是一個(gè)基于Vue的markdown的編輯器。

安裝

npm install mavon-editor --save

使用mavon-editor

在Vue中引入項(xiàng)目

main.js（全局引入）

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

index.html（放置編輯器的頁面）

<mavon-editor v-model="value"/>

在nuxt.js中使用

在工程目錄下plugins下新建vue-mavon-editor.js

import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
//use
Vue.use(mavonEditor);

然后在nuxt.config.js中添加plugins配置

 plugins: [
  //...
    { src: '@/plugins/vue-mavon-editor', srr: false }
  ],

在頁面中或組件中引入

<template>
  <div class="mavonEditor">
    <no-ssr>
      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
    </no-ssr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗體
        ... // 更多配置
      },
      handbook: "#### how to use mavonEditor in nuxt.js"
    };
  }
};
</script>
<style scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}
</style>

配置工具欄

默認(rèn)配置：

/*
    默認(rèn)工具欄按鈕全部開啟, 傳入自定義對(duì)象
    例如: {
         bold: true, // 粗體
         italic: true,// 斜體
         header: true,// 標(biāo)題
    }
    此時(shí), 僅僅顯示此三個(gè)功能鍵
 */

完整配置屬性：

toolbars: {
      bold: true, // 粗體
      italic: true, // 斜體
      header: true, // 標(biāo)題
      underline: true, // 下劃線
      strikethrough: true, // 中劃線
      mark: true, // 標(biāo)記
      superscript: true, // 上角標(biāo)
      subscript: true, // 下角標(biāo)
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 無序列表
      link: true, // 鏈接
      imagelink: true, // 圖片鏈接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏編輯
      readmodel: true, // 沉浸式閱讀
      htmlcode: true, // 展示html源碼
      help: true, // 幫助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
      save: true, // 保存（觸發(fā)events中的save事件）
      /* 1.4.2 */
      navigation: true, // 導(dǎo)航目錄
      /* 2.1.8 */
      alignleft: true, // 左對(duì)齊
      aligncenter: true, // 居中
      alignright: true, // 右對(duì)齊
      /* 2.2.1 */
      subfield: true, // 單雙欄模式
      preview: true, // 預(yù)覽
  }

API文檔

Event事件綁定

代碼高亮

開啟代碼高亮，如果要關(guān)閉將ishljs設(shè)置為false即可

// ishljs默認(rèn)為true
<mavon-editor :ishljs = "true"></mavon-editor>

代碼高亮插件highlight.js中的語言解析文件和代碼高亮樣式將在使用時(shí)加載，github-markdown-css和katex僅會(huì)在mounted時(shí)加載

Notice: 可選配色方案 和 支持的語言 是從 highlight.js/9.12.0 導(dǎo)出的

# 圖片上傳

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.將圖片上傳到服務(wù)器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指為mavonEditor實(shí)例，可以通過如下兩種方式獲取
               * 1. 通過引入對(duì)象獲取: `import {mavonEditor} from ...` 等方式引入后，`$vm`為`mavonEditor`
               * 2. 通過$refs獲取: html聲明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`為 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

• 默認(rèn)大小樣式為min-height:300px,min-width:300px可以自行覆蓋
• 基礎(chǔ)z-index:1500
• 僅用作展示可以設(shè)置props:toolbarsFlag:false，subfield:false，defaultOpen:"preview"

方式1：圖片上傳至文件服務(wù)器

• 每次添加圖片觸發(fā)上傳

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.將圖片上傳到服務(wù)器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
               // $vm.$img2Url 詳情見本頁末尾
               $vm.$img2Url(pos, url);
           })
        }
    }
}

• 統(tǒng)一上傳多張圖片

<template>
    <!--點(diǎn)擊按鈕觸發(fā)圖片統(tǒng)一上傳-->
    <button @click="uploadimg">upload</button>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data(){
        return {
            img_file: {}
        }
    },
    methods: {
        // 綁定@imgAdd event
        $imgAdd(pos, $file){
            // 緩存圖片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
            delete this.img_file[pos];
        },
        uploadimg($e){
            // 第一步.將圖片上傳到服務(wù)器.
            var formdata = new FormData();
            for(var _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * 例如：返回?cái)?shù)據(jù)為 res = [[pos, url], [pos, url]...]
                 * pos 為原圖片標(biāo)志（0）
                 * url 為上傳后圖片的url地址
                 */
                 // 第二步.將返回的url替換到文本原位置![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url 詳情見本頁末尾
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    }
}

方式2：將圖片保存為base64編碼

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" v-model="mdStr" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    data() {
        return {
            mdStr: '### demo \n ![image](0)'
        };
    },
    mounted() {
        // 如果原始md字符串中存在曾上傳的圖片， 則需要將對(duì)應(yīng)<img>中的src替換為base64
        this.$nextTick(() => {
            // $vm.$imgUpdateByUrl 詳情見本頁末尾
            $vm.$imgUpdateByUrl(0, base64內(nèi)容);
        }
    },
    methods: {
        $imgAdd(pos, $file){
            // 將圖片上傳到服務(wù)器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((flag) => {
           })
        }
    }
}

圖片事件

name	params	describe
refs.toolbar_left.$imgDelByFilename(>=2.1.6)	String: filename	主動(dòng)刪除對(duì)應(yīng)圖片文件, 如果成功返回TRUE，否則返回FALSE, (并將其從 md 源碼中刪除 (>=2.4.16))
refs.toolbar_left.$imgAddByFilename(>=2.1.6)	String: filename, File: file	添加對(duì)應(yīng)圖片文件，文件別名為filename(filename 必須為 ./filename 樣式), 如果成功返回TRUE，否則返回FALSE
refs.toolbar_left.$imgUpdateByFilename(>=2.1.6)	String: filename, File: file	更新對(duì)應(yīng)文件名的圖片文件(filename 必須為 ./filename 樣式), 如果成功返回TRUE，否則返回FALSE
imgUpdateByUrl(>=2.1.5)	String: filename, String: url	將md源碼中圖片文件名替換為url(如[圖片上傳失敗...(image-f2acd-1563459410369)] -> [圖片上傳失敗...(image-608741-1563459410369)])

注意: $vm指為mavonEditor實(shí)例，可以通過如下兩種方式獲取

1. 通過引入對(duì)象獲取: import {mavonEditor} from ... 等方式引入后，此時(shí)$vm即為mavonEditor
2. 通過vm為this.$refs.md`

Markdown-It

獲取mavonEditor中的markdown-it對(duì)象

方法1：全局引入mavonEditor獲取

import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
//...
mavonEditor.markdownIt

方法2：局部引入mavonEditor獲取

import {mavonEditor} from 'mavon-editor'
mavonEditor.getMarkdownIt()
或者
mavonEditor.mixins[0].data().markdownIt

方法3：通過mavonEditor的實(shí)例獲取

 <mavonEditor ref=md></mavonEditor>
 //...
 this.refs.md.markdownIt

使用markdown-it對(duì)象

// markdownIt通過上述方式獲取
markdownIt.set({ breaks: false });

設(shè)置markdown換行格式必須為行尾添加兩空格

跟多markdown-it設(shè)置