vue 專案中使用 markdown編輯器 mavon-editor

liaohui5發表於2019-03-03
Vue

vue version: vue 2.5.*

安裝 github地址

 npm install mavon-editor --save
複製程式碼

引入

引入有多種方式，但是我常使用的是以元件的形式來引入

<template>
    <div>
      <mavon-editor ref="editor" v-model="doc"> </mavon-editor>
    </div>
</template>
<script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
    name: "Create",
    components: {mavonEditor},
    data(){
      return {
        doc: '',
      }
    }
}
</script>
複製程式碼

獲取/修改值

使用 $refs

// 獲取 markdown
let markdown = this.$refs.editor.d_value;
// 修改 markdown
this.$refs.editor.d_value = '> hello world';

// 獲取編譯後的 html
let html = this.$refs.editor.d_render;
複製程式碼

使用 v-model

// 獲取 markdown
let doc = this.doc;
// 修改  markdown
this.doc = 'hello world';
複製程式碼
  • 注: 使用 $refs 的方式獲取值可以獲取到 markdown 和 編譯後的 html, 但是使用 v-model 只能獲取到 markdown

文件

可用props 可用事件 圖片處理

可能有用

events

  • 利用一個例子看params的使用方式params的使用方式
<template>
    <div>
        <!-- 
            @save: 按下 ctrl + s 時觸發
            @change: 當值發生改變時 觸發
        -->
        <mavon-editor
            @save="saveDoc"
            @change="updateDoc"
            ref="editor"
            v-model="doc">
         </mavon-editor>
    </div>
</template>
<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
    name: "Create",
    components: { mavonEditor },
    data() {
        return {
            doc: ""
        };
    },
    methods: {
        updateDoc(markdown, html) {
            // 此時會自動將 markdown 和 html 傳遞到這個方法中
            console.log("markdown內容: " + markdown);
            console.log("html內容:" + markdown);
        },
        saveDoc(markdown, html) {
            // 此時會自動將 markdown 和 html 傳遞到這個方法中
            console.log("markdown內容:" + markdown);
            console.log("html內容:" + html);
        }
    }
};
</script>
複製程式碼

相關文章