Vue3使用v-md-editor md展示修改markdown(md)文档

最新推荐文章于 2025-04-07 14:33:56 发布

桂亭亭

最新推荐文章于 2025-04-07 14:33:56 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_53679247/article/details/130248586

版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

该文章介绍了如何安装和使用kangc/v-md-editor，一个Vue的Markdown编辑器组件。内容包括npm安装，导入所需库，设置高亮主题，以及在预览和编辑模式下的简单使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

命令

npm install @kangc/v-md-editor@next

引入

main.js

// md 相关
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.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';
VMdEditor.use(githubTheme, {
    Hljs: hljs,
});
var app = createApp(App);
app.use(MyRouter).use(VMdEditor).use(ArcoVue)

使用

简单使用

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

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

预览模式（当作展示组件使用）

<VMdTextareaEditor style="width: 800px" :mode="`preview`" 
v-model="text"></VMdTextareaEditor>
<script setup>
import VMdTextareaEditor from "@kangc/v-md-editor"

const text = ref("## hello baby! \n" +
    "ds " +
    "是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓d怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpov是收到v草莓怕你发订单你的id的发使得fpo" +
    "是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
    "" +
    "" +
    "" +
    "" +
    "");
<script>

效果

编辑模式

    <v-md-textarea-editor height="800px"></v-md-textarea-editor>
<script setup>
import VMdTextareaEditor from "@kangc/v-md-editor"

// 文章标题
const handleChange=(title)=>{

}

</script>