vue前端markdown的编辑与展示

1、安装并配置mavon-editor到Vue项目

前端vue，后端springboot实现markdown文件的编辑与上传。主要使用mavon-editor插件

安装

npm install mavon-editor --save

配置

新建mavenEditor.js

 import mavonEditor from 'mavon-editor'   //编辑器import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)

引入

  import {mavonEditor} from "mavon-editor";import "mavon-editor/dist/css/index.css";
export default {name: "Create",components: {mavonEditor},methods: {saveDoc(markdown, html) {this.form.contentMd = markdown;this.form.contentHtml = html;console.log("doc:" + this.form.doc);// 此时会自动将 markdown 和 html 传递到这个方法中console.log("markdown内容:" + this.form.contentMd);console.log("html内容:" + this.form.contentHtml);},}}

使用

      <mavon-editor @save="saveDoc" @change='saveDoc' ref="editor" v-model="form.doc"></mavon-editor>

展示编辑的内容

    <div class="browser-wrap"><h2 align="center">{{bkName}}</h2><mavon-editor :boxShadow="false" defaultOpen="preview" v-model="contentHtml" :toolbarsFlag="false" :subfield="false":editable="false"></mavon-editor></div>

  export default {data() {return {id: this.$route.params.id,contentHtml: '',bkName: '',}},}

也可以参考：https://blog.csdn.net/ws6afa88/article/details/108765569