当前位置：首页 > VUE

vue实现markdown

2026-01-07 18:54:51VUE

Vue 实现 Markdown 编辑器

在 Vue 中实现 Markdown 编辑器可以通过集成第三方库或自定义解析器完成。以下是两种常见方法：

使用第三方库（如 marked 或 markdown-it）

安装依赖库：

npm install marked markdown-it

在 Vue 组件中使用：

<template>
  <div>
    <textarea v-model="markdownText"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { marked } from 'marked'; // 或使用 markdown-it

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

自定义解析器（基础实现）

如果需要轻量级解决方案，可以手动解析部分 Markdown 语法：

<template>
  <div>
    <textarea v-model="markdownText"></textarea>
    <div>{{ parsedMarkdown }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markdownText: ''
    };
  },
  computed: {
    parsedMarkdown() {
      return this.markdownText
        .replace(/^# (.*$)/gm, '<h1>$1</h1>')
        .replace(/^\* (.*$)/gm, '<li>$1</li>');
    }
  }
};
</script>

高级功能集成

语法高亮

配合 highlight.js 实现代码高亮：

npm install highlight.js

在 marked 中配置：

import hljs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlight(lang || 'plaintext', code).value;
  }
});

实时预览

通过拆分组件实现双栏编辑：

<template>
  <div class="editor-container">
    <textarea class="editor" v-model="markdownText"></textarea>
    <div class="preview" v-html="compiledMarkdown"></div>
  </div>
</template>

<style>
.editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
</style>

安全注意事项

使用 v-html 时需防范 XSS 攻击：

import DOMPurify from 'dompurify';

// 在 computed 中处理
compiledMarkdown() {
  return DOMPurify.sanitize(marked(this.markdownText));
}

完整组件示例

结合所有功能的完整组件：

<template>
  <div class="markdown-editor">
    <div class="toolbar">
      <button @click="insertHeader">H1</button>
      <button @click="insertCode">Code</button>
    </div>
    <textarea ref="editor" v-model="markdownText"></textarea>
    <div class="preview" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { marked } from 'marked';
import DOMPurify from 'dompurify';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: (code, lang) => 
    hljs.highlight(lang || 'plaintext', code).value
});

export default {
  data() {
    return {
      markdownText: ''
    };
  },
  computed: {
    compiledMarkdown() {
      return DOMPurify.sanitize(marked(this.markdownText));
    }
  },
  methods: {
    insertHeader() {
      this.markdownText += '\n# Header\n';
      this.$refs.editor.focus();
    },
    insertCode() {
      this.markdownText += '\n```js\n// code here\n```\n';
    }
  }
};
</script>

vue实现markdown