Vue中使用 vditor 使用详细步骤，代码以及注释，效果图

最新推荐文章于 2025-07-02 12:10:43 发布

魔术师ID

最新推荐文章于 2025-07-02 12:10:43 发布

阅读量2.2k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45585640/article/details/135116157

本文详细介绍了如何在Vue应用中使用Vditor插件处理Markdown文本，包括安装、导入、创建实例、配置选项、获取Markdown内容和转换为HTML显示的过程。

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

使用 Vditor 在 Vue 中编辑并展示 Markdown 文本的步骤如下：

1. 安装 Vditor：使用 npm 安装 Vditor 插件：

npm install --save vditor

2. 导入 Vditor：在需要使用 Vditor 的 Vue 组件中导入 Vditor 插件：

import Vditor from 'vditor';

3. 创建 Vditor 实例：在 Vue 组件的 created 生命周期钩子函数中创建 Vditor 实例，并将其挂载到 Vue 实例的 data 中：

created() {
  this.vditor = new Vditor('vditorContainer');
}

4. 添加 Vditor 容器：在 Vue 组件的模板中添加一个与 Vditor 实例绑定的容器：

<template>
  <div id="vditorContainer"></div>
</template>

5. 设置 Vditor 配置：根据需要设置 Vditor 的配置项，例如编辑器模式（编辑或预览）、主题、语言、提示功能等。可以在 created 生命周期钩子函数中调用 Vditor 的 setOption 方法设置配置项：

created() {
  this.vditor = new Vditor('vditorContainer');
  this.vditor.setOption({
    mode: 'wysiwyg',
    theme: 'classic',
    lang: 'zh_CN',
    hint: {
      emoji: {
        '+1': '👍',
        '-1': '👎',
        '100': '💯',
        // 其他自定义 emoji
      },
      emojiTail: ' ',
      at: ['user1', 'user2', 'user3'],
      // 其他自定义提示
    }
  });
}

6. 获取 Markdown 文本：通过 Vditor 实例的 getValue 方法获取编辑器中的 Markdown 文本。

methods: {
  getMarkdown() {
    const markdown = this.vditor.getValue();
    console.log(markdown);
  }
}

7. 展示 Markdown 文本：将获取到的 Markdown 文本转换为 HTML 并在页面中展示。可以使用第三方的 Markdown 解析库，如 markdown-it。

<template>
  <div>
    <div id="vditorContainer"></div>
    <div v-html="html"></div>
  </div>
</template>

<script>
import Vditor from 'vditor';
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      vditor: null,
      markdown: '',
      html: ''
    };
  },
  created() {
    this.vditor = new Vditor('vditorContainer');
  },
  methods: {
    getMarkdown() {
      this.markdown = this.vditor.getValue();
      const md = new MarkdownIt();
      this.html = md.render(this.markdown);
    }
  }
}
</script>