在Vue3中使用markdown编辑器

安装vue3版本的插件

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

在vue3中main.js注册

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,
});
app.use(VueMarkdownEditor)

基本使用

<template>
  <v-md-editor
    v-model="article.text"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="400px"
  >
  </v-md-editor>
</template>
<script setup>
import { reactive } from "vue";
const article = reactive({
  text: "",
});
const handleUploadImage = (event, insertImage, files) => {
  // 拿到 files 之后传给后端，后端返回给一个图片地址
  console.log(files);
  //此处网络请求忽略
  //拿到图片地址就可以用地址，封装如下的对象了，便可显示到markdown编辑器上了
  insertImage({
    url: "https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    desc: "图片",
    width: "auto",
    height: "auto",
  });
   //编辑信息
  console.log(article.text);
};
</script>