Vue3使用Markdown编辑器并显示

最新推荐文章于 2026-05-02 10:59:38 发布

原创最新推荐文章于 2026-05-02 10:59:38 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

需转载请联系QQ:846581636

GEO检测

标签

#编辑器 #vue3 #markdown #markdown-it

收录于

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何通过npm安装并全局注册kangc/v-md-editor，在Vue应用中创建Markdown编辑器。首先，引入所需库和样式，然后在main.js中使用VueMarkdownEditor并应用vuepress主题。接着展示了一个Vue组件模板，用于显示Markdown文本并实时渲染HTML。通过watcher监听v-model的变化，使用markdown-it库进行Markdown到HTML的转换。

安装markdown-it

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

在main.js中全局注册

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';

VueMarkdownEditor.use(vuepressTheme, {

});


const app = createApp(App)

app.use(VueMarkdownEditor)
app.mount('#app')

使用markdown

<template>
  <div class="visualBox">
    <v-md-editor v-model="text" height="400px"></v-md-editor>
    <div v-html="html"></div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue';
import MarkdownIt from 'markdown-it';

const text = ref("");
const html = ref("");

watch(text,
    (newValue, oldValue) => {
      const md = new MarkdownIt();
      html.value = md.render(newValue);
      console.log("新值：" + newValue);
    },
    {
      immediate: true,
      deep: false
    }
)

</script>

<style scoped>

</style>