md-editor-v3 markdown编辑器

katsukichan

已于 2024-06-26 15:06:53 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签：编辑器 javascript vue.js

于 2022-09-08 17:36:04 首次发布

本文链接：https://blog.youkuaiyun.com/nep_chan/article/details/126768041

本文档展示了如何在Vue3项目中使用md-editor-v3 Markdown编辑器，通过引入showdown库将Markdown转换为HTML，并提供了上传图片和保存数据的示例代码。编辑器的toolbar可以根据需求自定义禁用部分功能，点击按钮直接保存Markdown内容为HTML格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

md-editor-v3

md-editor-v3官网

npm i md-editor-v3 --save

npm i showdown --save

由于该编辑器输入为markdown格式，要转换成html则需要插件转换，因此使用showdown
md-editor-v3也提供了onHtmlChanged来转换，不过出于贪图逻辑上的便利没有使用

vue3案例

toolbarsExclude为toolbar禁用，去掉不需要的按键

<template>
  <MdEditor
    toolbarsExclude="['link', 'mermaid', 'katex', 'github', 'save']"
    v-model="content"
    @onUploadImg="onUploadImg"
  >
  </MdEditor>
  <el-button @click="saveData" type="primary">保存</el-button>
</template>

<script lang="ts">
  import { toRefs, defineComponent, reactive } from 'vue';
  import showdown from 'showdown';
  import { MdEditor } from 'md-editor-v3';
  import 'md-editor-v3/lib/style.css';

  export default defineComponent({
    components: { MdEditor },
    setup() {
      const state = reactive({
        content: '',
      });

      const onUploadImg = async (files, callback) => {
        const res = await Promise.all(
          Array.from(files).map((file) => {
            return new Promise(async (rev, rej) => {
              const form = new FormData();
              form.append('files', file);
              // 请求图片上传接口 返回网络 url 给 callback
              const res = await Api.uploadFile(form);
              if (res?.state) {
                rev(res.value.url);
              }
            });
          }),
        );
        callback(res.map((item: any) => item));
      };

      // 点击页面定义的按钮，保存数据，content为markdown文本内容
      // 这里没必要使用toolbar的save按键保存文本再点击按钮调用接口
      const saveData = async () => {
        const { content } = state;
        const converter = new showdown.Converter();
        const data = {
          content: converter.makeHtml(content),
        };
        const res: any = await Api.addData(data);
        if (res?.state) {
          ElMessage.success(res?.message ?? '新增成功');
        }
      };

      return {
        ...toRefs(state),
        onUploadImg,
        saveData,
      };
    },
  });
</script>