vue前端markdown的编辑与展示

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'
    // use
 Vue.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>

  import {
    mavonEditor
  } from "mavon-editor";
  import "mavon-editor/dist/css/index.css";
  export default {
    data() {
      return {
        id: this.$route.params.id,
        contentHtml: '',
        bkName: '',
      }
    },
   }

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