vue实现markdown

Vue 实现 Markdown 编辑器

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

使用 marked 和 highlight.js

安装依赖库：

npm install marked highlight.js

在 Vue 组件中引入并配置：

<template>
  <div>
    <textarea v-model="markdown" @input="updatePreview"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

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

export default {
  data() {
    return {
      markdown: '',
      compiledMarkdown: ''
    };
  },
  methods: {
    updatePreview() {
      this.compiledMarkdown = marked(this.markdown);
    }
  }
};
</script>

使用 vue-markdown 插件

安装插件：

npm install vue-markdown

在组件中使用：

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

<script>
import VueMarkdown from 'vue-markdown';

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

使用 tiptap 编辑器

安装依赖：

npm install @tiptap/vue-2 @tiptap/starter-kit @tiptap/extension-document @tiptap/extension-paragraph @tiptap/extension-text @tiptap/extension-bold @tiptap/extension-code @tiptap/extension-italic

组件实现：

<template>
  <div>
    <editor-content :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      content: '',
      extensions: [
        StarterKit,
      ],
    })
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
</script>

自定义 Markdown 解析器

如果需要完全自定义实现，可以创建解析函数：

function customMarkdownParser(text) {
  // 替换标题
  text = text.replace(/^# (.*$)/gm, '<h1>$1</h1>');
  // 替换粗体
  text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
  // 替换代码块
  text = text.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
  return text;
}

在 Vue 组件中使用：

<template>
  <div>
    <textarea v-model="markdown"></textarea>
    <div v-html="parsedMarkdown"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markdown: '',
    };
  },
  computed: {
    parsedMarkdown() {
      return customMarkdownParser(this.markdown);
    }
  }
};
</script>

样式优化

为 Markdown 输出添加基本样式：

.markdown-output h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
.markdown-output pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
}
.markdown-output code {
  font-family: monospace;
}

功能扩展

添加工具栏和更多 Markdown 功能：

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

<script>
export default {
  methods: {
    insertHeader() {
      this.markdown += '\n# Header\n';
      this.$refs.editor.focus();
    },
    insertBold() {
      this.markdown += ' bold text ';
      this.$refs.editor.focus();
    },
    insertCode() {
      this.markdown += '\n```\ncode block\n```\n';
      this.$refs.editor.focus();
    }
  }
};
</script>

以上方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的方案。