当前位置：首页 > VUE

vue实现md编辑

2026-02-20 07:01:54VUE

实现 Markdown 编辑器的方法

在 Vue 中实现 Markdown 编辑器可以通过多种方式完成，以下是几种常见的方法：

使用现成的库

Vue 社区中有许多成熟的 Markdown 编辑器组件可以直接使用：

// 安装依赖
npm install @kangc/v-md-editor

// 在 Vue 项目中引入
import VueMarkdownEditor 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';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VueMarkdownEditor.use(githubTheme);
Vue.use(VueMarkdownEditor);

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

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

结合 Markdown 解析器

如果需要更多自定义功能，可以结合 Markdown 解析器实现：

npm install marked highlight.js

<template>
  <div class="markdown-editor">
    <textarea v-model="rawText"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(lang, code).value;
    }
    return hljs.highlightAuto(code).value;
  },
});

export default {
  data() {
    return {
      rawText: '',
    };
  },
  computed: {
    compiledMarkdown() {
      return marked(this.rawText);
    },
  },
};
</script>

<style>
/* 添加必要的样式 */
</style>

使用 Monaco Editor

对于需要类似 VS Code 体验的高级编辑器：

vue实现md编辑

npm install monaco-editor

<template>
  <div ref="editor" class="editor"></div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  mounted() {
    this.editor = monaco.editor.create(this.$refs.editor, {
      value: '',
      language: 'markdown',
      theme: 'vs-dark',
      automaticLayout: true,
    });
  },
  beforeDestroy() {
    this.editor.dispose();
  },
};
</script>

<style>
.editor {
  width: 100%;
  height: 500px;
}
</style>