vue 项目中使用 markdown编辑器 mavon-editor

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>