Vue 3中的Markdown编辑与预览：mavonEditor与markdown-it

在Vue 3项目中实现Markdown编辑与预览功能，mavonEditor和markdown-it是两个非常流行的工具。mavonEditor是一个基于Vue的Markdown编辑器组件，支持实时预览、语法高亮等功能；而markdown-it则是一个轻量级的Markdown解析库，适合需要自定义渲染逻辑的场景。

接下来，我们将详细探讨如何在Vue 3中集成这两个工具，并分析它们的特点及适用场景。

1. 安装依赖

首先，确保你的Vue 3项目已经创建完成。如果尚未创建，可以通过Vue CLI或Vite快速搭建。

使用 mavonEditor

mavonEditor 是一个 Vue 组件，可以直接用于 Vue 2 和 Vue 3 项目。安装命令如下：

npm install mavon-editor

使用 markdown-it

markdown-it 是一个独立的 Markdown 解析库，适用于任何 JavaScript 环境。安装命令如下：

npm install markdown-it

2. 集成 mavonEditor

引入样式和组件

在使用 mavonEditor 前，需要引入其样式文件以及组件本身：

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

const app = createApp(App);
app.use(mavonEditor);
app.mount('#app');

创建 Markdown 编辑页面

在 Vue 组件中引入并使用 mavonEditor：

<template>
  <div>
    <mavon-editor v-model="content" @change="handleContentChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '# Hello, Markdown!'
    };
  },
  methods: {
    handleContentChange(value, render) {
      console.log('Markdown Content:', value);
      console.log('Rendered HTML:', render);
    }
  }
};
</script>

功能扩展

mavonEditor 提供了丰富的配置选项，例如代码高亮、图片上传、全屏模式等。你可以通过 :options 属性进行自定义：

<mavon-editor 
  v-model="content" 
  :toolbars="toolbars"
/>
<script>
export default {
  data() {
    return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        underline: true, // 下划线
        strikethrough: true, // 删除线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // 行内代码
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        previewCode: true // 预览HTML
      }
    };
  }
};
</script>

3. 集成 markdown-it

如果你只需要一个简单的 Markdown 转 HTML 渲染器，markdown-it 是一个更灵活的选择。

基础用法

以下是如何在 Vue 3 中使用 markdown-it 将 Markdown 转换为 HTML：

// utils/markdown.js
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();

export function renderMarkdown(markdown) {
  return md.render(markdown);
}

在 Vue 组件中调用该函数：

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

<script>
import { ref, computed } from 'vue';
import { renderMarkdown } from '@/utils/markdown';

export default {
  setup() {
    const markdown = ref('# Hello, Markdown!');
    const htmlContent = computed(() => renderMarkdown(markdown.value));

    return {
      markdown,
      htmlContent
    };
  }
};
</script>

插件扩展

markdown-it 支持插件扩展，可以轻松添加额外功能，例如任务列表、表格、脚注等。以下是一个示例：

import MarkdownIt from 'markdown-it';
import MarkdownItAbbr from 'markdown-it-abbr'; // 示例插件：缩写

const md = new MarkdownIt({
  html: true,
  breaks: true,
  linkify: true
});

md.use(MarkdownItAbbr);

export function renderMarkdownWithPlugins(markdown) {
  return md.render(markdown);
}

4. 比较与选择

根据实际需求选择合适的工具。如果需要完整的编辑器体验，mavonEditor 是更好的选择；如果仅需渲染功能，则推荐使用 markdown-it。