当前位置：首页 > VUE

vue实现md编辑

2026-01-19 14:44:12VUE

vue实现markdown编辑器

使用Vue实现Markdown编辑器可以借助现成的库或组件，以下是几种常见实现方式：

使用marked和highlight.js库

安装依赖库：

npm install marked highlight.js

创建Vue组件：

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

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

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlightAuto(code, [lang]).value;
  }
});

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

<style>
.markdown-editor {
  display: flex;
}
textarea {
  width: 50%;
  min-height: 500px;
}
.markdown-preview {
  width: 50%;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

使用vue-markdown组件

安装vue-markdown：

npm install vue-markdown

基本用法：

<template>
  <div>
    <textarea v-model="content"></textarea>
    <vue-markdown :source="content"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      content: '# Markdown Content'
    }
  }
}
</script>

使用mavon-editor

mavon-editor是一个功能丰富的Markdown编辑器：

npm install mavon-editor

实现代码：

<template>
  <mavon-editor v-model="content"/>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      content: ''
    }
  }
}
</script>

实现双向绑定实时预览

对于自定义实现，可以结合watch或computed属性实现实时预览：

<template>
  <div class="editor-container">
    <div class="editor-column">
      <textarea v-model="rawText"></textarea>
    </div>
    <div class="preview-column" v-html="compiledHtml"></div>
  </div>
</template>

<script>
import marked from 'marked';

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

<style>
.editor-container {
  display: flex;
}
.editor-column, .preview-column {
  flex: 1;
  padding: 10px;
}
textarea {
  width: 100%;
  height: 500px;
}
</style>

添加扩展功能

支持代码高亮

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

marked.setOptions({
  highlight: function(code, language) {
    const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
    return hljs.highlight(validLanguage, code).value;
  }
});

添加工具栏

<template>
  <div>
    <div class="toolbar">
      <button @click="insertText('bold')">Bold</button>
      <button @click="insertText('*italic*')">Italic</button>
    </div>
    <textarea ref="editor" v-model="content"></textarea>
  </div>
</template>

<script>
export default {
  methods: {
    insertText(text) {
      const textarea = this.$refs.editor;
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      this.content = this.content.substring(0, start) + 
                    text + 
                    this.content.substring(end);
      this.$nextTick(() => {
        textarea.setSelectionRange(start + text.length, start + text.length);
        textarea.focus();
      });
    }
  }
}
</script>