【Vue】Vue 中引入 MarkDown 编辑器

た入场券 2023-07-10 11:25 4阅读 0赞

MarkDown：目前应用非常广泛的文本编辑器，应用于各类博客网站编辑中

参考 github 链接：[https://github.com/hinesboy/mavonEditor][https_github.com_hinesboy_mavonEditor]

--------------------

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

### 1、安装 ###

npm install mavon-editor --save

### 2、引入 & 配置 ###

在要使用 MarkDown 组件的实例中引入

### 3、使用 ###

*  将编辑内容进行双向绑定 v-model="content"
 *  实时改变内容：将 MarkDown 实时转化为 html

<template>
      <div>
        <mavon-editor v-model="content" ref="md" @change="change" style="min-height: 600px" />
    
        <button @click="submit">提交</button>
      </div>
    </template>
    
    <script>
    // 导入组件 及 组件样式
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
      components: {
        mavonEditor
      },
      // content:输入的markdown
      // html：及时转的html
      data () {
        return {
          content: '',
          html: ''
        }
      },
      methods: {
        // 所有操作都会被解析重新渲染
        change (value, render) {
          // render 为 markdown 解析后的结果[html]
          this.html = render
        },
        // 提交
        submit () {
          console.log(this.content)
          console.log(this.html)
        }
      },
      mounted () {
    
      }
    }
    </script>

[https_github.com_hinesboy_mavonEditor]: https://github.com/hinesboy/mavonEditor
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202003021156456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70