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
文档
可能有用
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>
