Vue3——v-md-editor安装使用教程
安装
# 使用 npm npm i @kangc/v-md-editor -S
EditorMarkdown.vue页面用来封装此编辑器组件
Test.vue作为接受EditorMarkdown.vue的父组件，当测试页使用
路由部分要放入test.vue
main.js部分全局引入组件
import EditorMarkdown from '@/components/EditorMarkdown.vue'; app.component('EditorMarkdown',EditorMarkdown)
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>
