Nuxt3+Vue3中使用Markdown编辑器

md-editor-v3

Markdown 编辑器，vue3 版本，使用 jsx 模板 和 typescript 开发，支持切换主题、prettier 美化文本等。 文档地址：imzbf.github.io/md-editor-v…

vue3直接按照文官方文档中示例直接引入配置即可（亲测）。下面说一下Nuxt3中具体如何使用，在nuxt最新3.14版本中可用。

1.安装

  npm install md-editor-v3
  yarn add md-editor-v3
  pnpm install md-editor-v3

2.新建组件

在components/目录下新建MyMdEditor.vue组件

<template>
  <MdEditor :autoFoldThreshold="autoFoldThreshold" v-model="text" @onChange="changeEditer" @onUploadImg="onUploadImg" :style="{height:props.height}"/>
</template>

<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const emit = defineEmits(['change', 'update:modelValue'])
const props = defineProps({
  height: {
    type: String,
    default: '500px'
  },
  modelValue: {},
  autoFoldThreshold:{//代码超过多少行就自动折叠
    type:Number,
    default:80
  }
})
const text = ref(props.modelValue)
const changeEditer = (e) => {
  emit("update:modelValue", e)
}

//上传方法
const onUploadImg = async (files, callback) => {
  console.log(files[0])
  // 获取当前日期
  const currentDate = new Date();
  // 格式化日期
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
  const day = currentDate.getDate();
  // 生成随机字符串
  const random = Math.floor(Math.random() * 1000000); // 生成0到999999之间的随机整数
  const randomString = String(random);
  // 拼接日期和随机字符串
  const result = year + month + day + randomString;
  // 获得图片名称
  const name = result + '-' + files[0].name

  let formData = new FormData();
  formData.append("file", files[0]);
  formData.append("fileName", name);
  formData.append("bucketName", "mogu-app");
  const token = localStorage.getItem("token");
  await $fetch("/api/common/upload", {
    method: "POST",
    headers: {
      authorization: `Bearer ${token}`,
      credentials: "same-origin",
    },
    body: formData,
  }).then((res) => {
    if (res.code != 200) {
      ElMessage.error(res.message);
    }
    callback([res.data]);
  });
}
</script>

onUploadImg方法为上传方法，上传成功回显图片内容依靠callback()函数，官方文档也有使用介绍，我这里简单实现了一下，应该是支持多选上传的。

3.预览markdown文档

<template>
  <MdPreview :id="id" :modelValue="text" />
  <MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
const text = ref('# Hello Editor');
const id = ref("my-editor");
let scrollElement;
// 通过import.meta.env.SSR 判断 是否是ssr
if (import.meta.env.SSR) {
  scrollElement = "body";
} else {
  scrollElement = document.documentElement;
}
</script>

MdPreview组件是markdown文档回显，MdCatalog组件是文档的目录。

注意：nuxt3 ssr渲染模式下中是无法拿到dom元素的直接document.documentElement这段代码是会报错的，在nuxt2使用process.client来判断是否是客户端，Nuxt3中可以使用import.meta.env.SSR来判断

最后再将text值换成接口获取的markdown数据就完成了。

另：关注工种号【码界交流圈】好文第一时间分享不迷路1~ 👇