VUE集成MarkDown编辑器

一、详情介绍

在 Vue 3 中实现像 CSDN 一样的 Markdown 文本编辑器，这里使用的是@toast-ui/editor 库和 axios 库。
@toast-ui/editor 是一个用纯 JavaScript 和 CSS 编写的现代化 Markdown 编辑器库，具有以下功能：

1. 实时预览：@toast-ui/editor 可以在编辑器中实时预览 Markdown 文本的渲染效果。
2. 代码高亮：@toast-ui/editor 支持在编辑器中自动高亮代码。
3. TOC：@toast-ui/editor 可以根据 Markdown 文本中的标题自动生成目录。
4. TeX：@toast-ui/editor 支持在编辑器中插入 TeX 公式。
5. 流程图：@toast-ui/editor 可以在编辑器中插入流程图。
6. 时序图：@toast-ui/editor 可以在编辑器中插入时序图。
7. 甘特图：@toast-ui/editor 可以在编辑器中插入甘特图。
8. 上传图片：@toast-ui/editor 可以在编辑器中支持粘贴图片并即时上传到服务器。
9. 自定义代码块：@toast-ui/editor 可以在编辑器中使用自定义代码块语法。
10. 视觉主题：@toast-ui/editor 支持多种视觉主题样式。
11. 多语言支持：@toast-ui/editor 支持多种语言，包括英语、中文等。
12. 钩子函数：@toast-ui/editor 提供了一组钩子函数，可以方便地扩展其功能，例如上传图片等。
    总之，@toast-ui/editor 是一个功能丰富、易于使用的 Markdown 编辑器库，适合任何需要实现 Markdown 编辑的 Web 应用程序。

二、安装

1、安装 @toast-ui/editor 和 axios 包。

npm install @toast-ui/editor --save
npm install axios --save

2、main.js导入所需的库和组件。

import { createApp } from 'vue';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import axios from 'axios';

const app = createApp(App);

3、在 Vue 模板中使用 Editor 组件。

<template>
  <Editor
    :initialValue="initialValue"
    :hooks="hooks"
    :previewStyle="previewStyle"
    :usageStatistics="false"
    :extendedAutolinks="true"
    @change="onChange"
  />
</template>

4、在 Vue 组件中定义 initialValue、hooks、previewStyle 和 onChange 数据属性。

import { defineComponent } from 'vue';
import Editor from '@toast-ui/editor';
import axios from 'axios';

export default defineComponent({
  name: 'MyComponent',
  components: {
    Editor
  },
  data() {
    return {
      initialValue: '',
      hooks: {
        addImageBlobHook: async (blob, callback) => {
          try {
            const formData = new FormData();
            formData.append('image', blob);
            const response = await axios.post('/upload', formData);
            callback(response.data.url, 'alt text');
          } catch (err) {
            console.error(err);
          }
        }
      },
      previewStyle: 'vertical',
      onChange: value => {
        console.log(value);
      }
    };
  }
});

注意：以上代码将在 Vue 应用程序中创建一个基本的 Markdown 编辑器，并使用 axios 库将粘贴的图片上传到服务器。可以根据需要更改 formData 和 response.data.url，以适应服务器端代码。addImageBlobHook 钩子将在用户粘贴图像时触发，并将图像数据作为 Blob 对象传递给回调函数。然后，可以使用 axios 将 Blob 对象上传到服务器，并在上传成功后将图像 URL 传递给回调函数。