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页面引入

<template>
    
   <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

<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

<template>
   
  <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

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

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


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