GITEE文档
文档中详细介绍了自定义工具栏等

toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发events中的save事件）/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true, // 预览}

文中对于图片上传未提及，后面会进行补充。

安装

npm install mavon-editor --save

封装发布组件

<template><div><mavon-editorv-model="newContent"ref="md"style="min-height: 550px;"/></div>
</template><script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";export default {// 注册components: {mavonEditor,},props: {content: {type: String,default: null}},created() {},mounted() {},computed:{newContent: {get: function () {return this.content;},set: function (val) {this.$emit('receiveContent',val);}}},data() {return {//及时转的htmlhtml: '',}},methods: {},
}
</script>

使用发布组件

<markdown-editor :content="params.content" @receiveContent="receiveContent"></markdown-editor>

//接收内容receiveContent(content) {this.params.content = content;},

效果如下图：

封装预览组件

<template><div class="content_div"><mavon-editor class="md" :value="content":subfield="false":toolbars="toolbars"defaultOpen="preview":scrollStyle="true"></mavon-editor></div>
</template>
<script>
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";export default {name: "MarkdownEditorPreview",created() {},mounted() {},components: {mavonEditor,},props: {content: {type: String,default: ""}},methods: {},data() {return {toolbars: {// 导航目录navigation: true,}}}
}
</script>
<style scoped lang="scss">
</style>

使用预览组件

<markdown-editor-preview :content="data.content"></markdown-editor-preview>

效果如下图：