Vue3——v-md-editor(markDown编辑器)使用教程

Vue3——v-md-editor安装使用教程

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

EditorMarkdown.vue页面用来封装此编辑器组件
Test.vue作为接受EditorMarkdown.vue的父组件，当测试页使用
路由部分要放入test.vue

1. main.js部分全局引入组件

import EditorMarkdown from '@/components/EditorMarkdown.vue';
app.component('EditorMarkdown',EditorMarkdown)

2. EditorMarkdown页面引入

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:01:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
    <!-- 这里需要注意一下，官网上给的引入方式需要改一下，应该是没有更新导致的；还有一点就是modelValue需要添加括号，否则找不到这个值 -->
   <VueMarkdownEditor v-model="(modelValue)" :height="height+'px'"></VueMarkdownEditor>
</template>

<script setup>
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,
});

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 500,
  },
});
</script>

<style>
</style>

官网给出的教程图片如下：

这里会发现有些误差，调整一下即可
还有一点要注意的是如果直接将props中的值给到v-model需要加上括号，下面是代码片段
Test.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:03:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
    <editor-markdown></editor-markdown>
</template>

<script setup>
import { ref,reactive,onMounted } from "vue";
</script>
<style>
</style>

图片上传

 <VueMarkdownEditor v-model="(modelValue)" :disabled-menus="[]" :include-level="[1,2,3,4,5,6]"
    @upload-image="handleUploadImage"></VueMarkdownEditor>

const handleUploadImage = async(event, insertImage, files) => {
    console.log(files);
    // 这里做自定义图片上传
    let result = await proxy.Request({
        url:'/file/Image',
        dataType:'file',
        params:{
            file:files[0],
            type:1,
        }
    })
    if (!result) {
        return
    }
    const url = proxy.globaInfo.imageUrl+ result.data.fileName
    insertImage({
        url:url,
        desc: '博客图片',
        // width: 'auto',
        // height: 'auto',
      });
};

测试双向绑定

  <VueMarkdownEditor v-model="(modelValue)"  @change="change" :height="height+'px'"></VueMarkdownEditor>

// 子传父
const emit = defineEmits()
const change=(markdownContent,htmlContent)=>{
    emit('update:modelValue',markdownContent)
    emit('htmlContent',htmlContent)
}

test.vue进行测试

<template>
    <editor-markdown v-model="markdownContent"></editor-markdown>
    {{ markdownContent }}
</template>

<script setup>
import { ref,reactive,onMounted } from "vue";
const markdownContent = ref('# test')
</script>
<style>
</style>

效果如下：

这样一个组件就已经封装好了
以下附上完整代码：
EditorMarkdown.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:01:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
   <!-- :disabled-menus="[]"把禁用的title放在此数组中
        :include-level="[1,2,3,4,5,6]" 点击目录导航的层级
        @upload-image="handleUploadImage"图片上传
        @change="change"双向绑定效果
     -->
  <VueMarkdownEditor v-model="(modelValue)" :disabled-menus="[]" :include-level="[1,2,3,4,5,6]"
    @upload-image="handleUploadImage" @change="change" :height="height+'px'"></VueMarkdownEditor>
</template>

<script setup>
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";
import { getCurrentInstance } from "vue";
const {proxy} = getCurrentInstance()
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 500,
  },
});

const emit = defineEmits()
const change=(markdownContent,htmlContent)=>{
    emit('update:modelValue',markdownContent)
    emit('htmlContent',htmlContent)
}

const handleUploadImage = async(event, insertImage, files) => {
    console.log(files);
    // 这里做自定义图片上传
    let result = await proxy.Request({
        url:'/file/uploadImage',
        dataType:'file',
        params:{
            file:files[0],
            type:1,
        }
    })
    if (!result) {
        return
    }
    const url = proxy.globaInfo.imageUrl+ result.data.fileName
    insertImage({
        url:url,
        desc: '博客图片',
        // width: 'auto',
        // height: 'auto',
      });
};
</script>

<style>
</style>

Test.vue

<!-- author: Mr.J -->
<!-- date: 2023-03-29 15:03:56 -->
<!-- description: Vue3+JS代码块模板 -->
<template>
    <editor-markdown v-model="markdownContent"></editor-markdown>
    {{ markdownContent }}
</template>

<script setup>
import { ref,reactive,onMounted } from "vue";


const markdownContent = ref()
</script>
<style>
</style>