在Vue2中使用MarkDown编辑器输入（mavonEditor）

在开发一些需求如博客系统时，原始的文本框不满足我们的需求，展示word文档的格式又太麻烦吗，不难想到使用markdown的格式来输入和展示内容。本文介绍了在Vue2中怎么使用markdown格式的输入框和展示框。

先看一下实现的效果

官方文档

我们使用 mavonEditor 来实现（也可以使用vue-meditor）

官网

下载mavonEditor包

npm install mavon-editor --s

 在Vue2中组件导入

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default{
    //... 其余省略
    // 导入组件
    components: {
        mavonEditor
    }
}

使用mavonEditor

我这里只是简单的实现了下上面的效果，可以结合自己的实际需求修改

        <div class="tips">
            <span style="font-size: 24px; margin-top: 2%;">
                <!-- 此处需要使用 elementui 2 -->
                <i class="el-icon-paperclip"></i>
                发布博客（markDown）
            </span>
        </div>
        <div class="input" style="margin: 2%; margin-bottom: 0;">
            <mavon-editor v-model="inputContent" class="formclass" :editable="!check">                    
            </mavon-editor>
        </div>
        <div style="margin: 2%; margin-bottom: 0;">
            <span style="font-size: 24px; margin-top: 2%;">博客内容</span>
            <!-- 展示博客内容，只需要将编辑框和导航栏设置为 false 即可 -->
            <mavon-editor v-model="inputContent" 
                            class="formContent" 
                            :editable="false" 
                            :subfield="false" 
                            defaultOpen="preview" 
                            :toolbarsFlag="false" ></mavon-editor>
        </div>

操作图片

需要实现的效果是，用户在操作框粘贴或者上传图片，前端将图片传递给后端，后端返回存储图片的链接，前端根据链接在预览框中展示图片

修改上面的代码

        <div class="tips">
            <span style="font-size: 24px; margin-top: 2%;">
                <i class="el-icon-paperclip"></i>
                发布博客（markDown）
            </span>
        </div>
        <div class="input" style="margin: 2%; margin-bottom: 0;">
            <mavon-editor 
                v-model="inputContent" 
                class="formclass" 
                ref="mdedit"
                @imgAdd="imgAdd"
                :editable="!check"></mavon-editor>
        </div>
        <div style="margin: 2%; margin-bottom: 0;">
            <span style="font-size: 24px; margin-top: 2%;">博客内容</span>
            <!-- 展示博客内容，只需要将编辑框和导航栏设置为 false 即可 -->
            <mavon-editor v-model="inputContent"
                            class="formContent" 
                            :editable="false" 
                            :subfield="false" 
                            defaultOpen="preview" 
                            :toolbarsFlag="false" ></mavon-editor>
        </div>

在上述的代码中，我们需要关注 ref 和 @imgadd，ref使javaScript能够操作编辑框里面的元素，@imgadd指向了一个方法，在用户粘贴或者上传图片的时候自动执行。

新增一个函数

        imgAdd(pos,file){
            // pos: 图片文件的名字
            // file: 图片文件
            let imgData = new FormData();
            // 构建后端请求的参数,可以自己定义
            imgData.append('file',file);
            // 发送请求, 将图片上传后端并返回后端存储的链接
            blogApi.uploadImage(imgData).then(res=>{
                console.log(res.data.data);
                console.log(this.$refs.mdedit)
                // 将pos中文文件名替换为后端返回的图片链接
                this.$refs.mdedit.$img2Url(pos,res.data.data)
        });

 参考文章

Vue项目集成Markdown标记语言编辑器（MavonEditor）_vue集成markdown-CSDN博客https://blog.csdn.net/qq_43403676/article/details/124409715
Markdown插件mavon-editor上传图片_mavon-editor 图片-CSDN博客文章浏览阅读2.3k次。最终效果实现方法这里只着重说明mavon-editor如何上传图片，其他更多配置可参考文档：mavon-editor文档。https://blog.csdn.net/hhl18730252820/article/details/123456478