vue2 使用 markdown插件 v-md-editor

开始配置

v-md-editor 官方文档地址：https://code-farmer-i.github.io/vue-markdown-editor/zh/

1、npm 安装插件

npm i @kangc/v-md-editor -S

2、main.js 全局引入插件

/* v-md-editor 编辑器 start  */
/* 1、v-md-editor 基础引用  */
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

/* 2、v-md-editor 代码块关键字高亮  */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有语言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {
  Hljs: hljs,
});
Vue.use(VueMarkdownEditor);

/* 3、v-md-editor 二次封装  */
import mdEditor from '@/components/v-md-editor/index';
Vue.component('MdEditor', mdEditor);
/* v-md-editor 编辑器 end  */

3、二次封装插件

1、二次封装
2、main.js 全局引入( 第二部已加入)

在 components 目录下创建 v-md-editor 文件夹并创建文件 index.vue

index.vue 代码如下

<!--
详见： https://blog.csdn.net/qq_41463655/article/details/125340036
 -->

<template>
    <div>
        <v-md-editor v-model="editorValue"
                     :disabled-menus="[]"
                     @upload-image="handleUploadImage"
                     height="400px"></v-md-editor>
    </div>
</template>

<script>
    export default {
        name: 'mdEditor',
        data() {
            return {
                editorValue: this.content != null ? this.content : "",
            }
        },
        props: {
            // 接收值父组件传递值
            content: String
        },
        created() {
            console.log("--------加载md编辑器")
        },
        methods: {
            // v-md-editor 文件上传
            handleUploadImage(event, insertImage, files) {
                // console.log(files);
                // 上传
                for (let i = 0; i < files.length; i++) {
                    this.crud.upload(files[i], "image/vMdEditor/").then(res => {
                        // 获取返回数据
                        let data = res.data.data;
                        // 添加图片到内容
                        insertImage({
                            url: data.url,
                            desc: data.name
                        });
                    });
                }
            },
        },
        watch: {
            editorValue: function (newNum, oldNum) {
                // 修改调用者传入的值
                this.$emit('update:content', newNum)
            }
        },
    }
</script>

<style>
</style>

4、使用

在任意地方使用

 <MdEditor :content.sync="obj.content"></MdEditor>

效果如下，图片上传支持 cv, qq,wx截屏上传

5、关于编辑无法回显

初始化 MdEditor 编辑器过早, 可能导致数据无法正常回显
通过 v-if 控制 MdEditor 加载时间 (如下：在调用接口获取数据完成之后修改 initSuccess = true)

 <MdEditor v-if="initSuccess" :content.sync="obj.textThree"/>

结尾

• 个人开源项目（快速开发项目利器- 通用后台管理系统 ）–> https://gitee.com/wslxm/spring-boot-plus2 , 喜欢的可以看看

• 关注公众号【兮家】，不定时分享干货内容哦*
  

• 本文到此结束，如果觉得有用，动动小手点赞或关注一下呗，将不定时持续更新更多的内容…，感谢大家的观看！