Vue3使用Markdown编辑器并显示

安装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>