学习笔记——Vue3 引用 md-editor

目录

Vue3 引用 md-editor

问题

大家在网上搜“Vue3 怎么引用 md-editor”，搜出来的基本就只有 Vue2 的引用方式，这会导致 md-editor 使用不了：

---

解决办法

【官方文档】：安装 | v-md-editor (gitee.io)

安装支持 vue3 的版本

• 使用npm

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

• 使用yarn

yarn add @kangc/v-md-editor@next

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

---

结果