这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件


安装支持vue3的版本：

# 使用 npm
npm i @kangc/v-md-editor@next -S

在vue3中注册：

import { createApp } from 'vue';
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 app = createApp(/*...*/);

app.use(VueMarkdownEditor);

使用：

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

效果：

在vue3中使用markdown编辑器_github

打印出的​​text​​数据结构：

在vue3中使用markdown编辑器_图片上传_02

预览组件：

在vue3中引用

import { createApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);

使用：

<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

效果：

在vue3中使用markdown编辑器_github_03

图片上传问题：

在vue3中使用markdown编辑器_图片上传_04

上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。

示例：

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

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files);

      // 此处即为向编辑框中插入的内容，url即为图片上传后返回的链接
      // 此处只做示例
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
      });
    },
  },
};
</script>

效果：

在vue3中使用markdown编辑器_css_05