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

Re.Gin

已于 2023-12-04 16:39:41 修改

阅读量449

点赞数 2

分类专栏：学习笔记文章标签： vue

于 2023-08-19 22:34:26 首次发布

本文链接：https://blog.csdn.net/qq_63512036/article/details/132385260

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue3 引用 md-editor

问题

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFowKLWb-1692455520872)(https://gitee.com/ReGinWZY/figure-bed/raw/master/TyporaImg/Vue3 引用 md-editor 的问题.png)]

解决办法

【官方文档】：安装 | 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>