Vue--整合mavon-editor编辑器(markdown编辑和预览)

雨点打透心脏的1/2处 2023-09-29 17:11 0阅读 0赞

原文网址：[Vue--整合mavon-editor编辑器(markdown编辑和预览)\_IT利刃出鞘的博客-CSDN博客][Vue--_mavon-editor_markdown_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue如何使用markdown编辑器。

mavon-editor是目前比较主流的markdown编辑器，本文介绍它的使用方法。

**官网网址**

[https://github.com/hinesboy/mavonEditor][https_github.com_hinesboy_mavonEditor]

## 安装mavon-editor依赖 ##

npm install mavon-editor -P

## 注册mavon-editor编辑器 ##

在main.js中加入如下内容：

import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor);

## 使用编辑功能 ##

### 代码 ###

<template>
      <div class="app-container">
        <el-button type="primary" @click="saveGuideData()">发布</el-button>
    
        <el-form :model="guideDetail" :rules="rules" ref="dataForm" label-width="100px">
          <el-form-item label="内容" prop="content">
            <mavon-editor v-model="guideDetail.content"></mavon-editor>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    import {saveGuide} from "@/api/guide";
    export default {
      name: "GuideEdit",
      data() {
        return {
          guideDetail: {
            content: ''
          },
          rules: {
            content: [
              {required: true, message: '请输入内容', trigger: 'blur'}
            ]
          },
        }
      },
      methods: {
        saveGuideData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              saveGuide(this.guideDetail.content).then(() => {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              })
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

### 结果展示 ###

![1b47b73595dd40b993bc4b37285d793d.png][]

## 使用预览功能 ##

### 代码 ###

<template>
      <div class="app-container">
        <mavon-editor v-model="guideDetail.content"
                      :subfield="false"
                      :defaultOpen="'preview'"
                      :editable="false"
                      :toolbarsFlag="false"
                      >
        </mavon-editor>
      </div>
    </template>
    
    <script>
    export default {
      name: "GuideDetail",
      data() {
        return {
          guideDetail: {
            content: '### 这是第三级标题\n' +
                '这里是正文'
          },
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

### 结果展示 ###

![31495a07314b444bbe2abec981d0042a.png][]

[Vue--_mavon-editor_markdown_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126734669
[https_github.com_hinesboy_mavonEditor]: https://github.com/hinesboy/mavonEditor
[1b47b73595dd40b993bc4b37285d793d.png]: https://img-blog.csdnimg.cn/1b47b73595dd40b993bc4b37285d793d.png
[31495a07314b444bbe2abec981d0042a.png]: https://img-blog.csdnimg.cn/31495a07314b444bbe2abec981d0042a.png