基于vue3+ByteMD快速搭建自己的Markdown文档编辑器-EW帮帮网

简介

ByteMD 是一个轻量级、功能丰富的 Markdown 编辑器组件，由稀土掘金（juejin.cn）团队开发并开源。它采用 Svelte 构建，支持双向编辑（所见即所得），并提供了丰富的插件系统。

核心特点

轻量级

不依赖任何前端框架（如 React、Vue），可直接集成到任何项目中。
压缩后体积约 30KB（含核心功能）。

双向编辑模式

支持分屏预览、实时预览和切换为纯编辑器 / 预览模式。

插件系统

内置常用插件（如代码高亮、表格、数学公式等）。
支持自定义插件扩展功能。

安全处理

内置 XSS 过滤，防止恶意代码注入。
支持自定义 HTML 渲染规则。

响应式设计

适配移动端和桌面端，布局自动调整。

基本用法

安装依赖

安装环境依赖

pnpm install bytemd

安装vue3版本组件

pnpm install @bytemd/vue-next

安装主题

pnpm install juejin-markdown-themes //安装掘金主题 不安装无法正常显示markdown文本

安装插件

//可选安装插件
pnpm install @bytemd/plugin-medium-zoom  //图片缩放
pnpm install @bytemd/plugin-gfm          //让mrakdown 可以展示表格
pnpm install @bytemd/plugin-gemoji       //支持Gemoji短代码
pnpm install @bytemd/plugin-highlight    //支持代码块高亮

pnpm install @bytemd/plugin-math          //支持数学公式
pnpm install @bytemd/plugin-breaks
pnpm install @bytemd/plugin-frontmatter   //解析前置元数据
pnpm install @bytemd/plugin-highlight-ssr //支持代码块高亮ssr版本
pnpm install @bytemd/plugin-math-ssr      //支持数学公式ssr版本
pnpm install @bytemd/plugin-mermaid       //支持 Mermaid 图表

自定义组件

创建一个 ByteMD.vue组件，封装 ByteMD 的功能：

<script setup lang="ts">
import {Editor} from '@bytemd/vue-next'
//第三方主题：https://github.com/xitu/juejin-markdown-themes
import 'juejin-markdown-themes/dist/juejin.min.css'
import 'bytemd/dist/index.css'

import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import zhHans from 'bytemd/locales/zh_Hans.json'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import math from '@bytemd/plugin-math'
import breaks from '@bytemd/plugin-breaks'
import frontmatter from '@bytemd/plugin-frontmatter'
import highlightSsr from '@bytemd/plugin-highlight-ssr'
import mathSsr from '@bytemd/plugin-math-ssr'
import mermaid from '@bytemd/plugin-mermaid'

import {defineProps, withDefaults} from 'vue'

// 定义Props接口
interface Props {
  height?: number | string;
  handleChange: (value: string) => void;
  mode?: string;
}

// 定义默认值
const props = withDefaults(defineProps<Props>(), {
  height: 400,
  mode: () => 'split', //编辑器显示模式，默认值：auto
  handleChange: (v: string) => {
    console.log(v)
  }
})

// 添加插件
const plugins = [
  gfm(),
  highlight(),
  gemoji(),
  mediumZoom(),
  math(),
  breaks(),
  frontmatter(),
  highlightSsr(),
  mathSsr(),
  mermaid(),
]

const emit = defineEmits<{
  mounted: [];
}>();

const content = defineModel<string>('modelValue', {
  default: '',
});

//上传图片
import {ossUpload} from "#/api/system/oss";

const handleUploadImages = async (files: any) => {
  let imgs: any = []
  for (let index = 0; index < files.length; index++) {
    const file = files[index]
    let res = await ossUpload(file)  //上传到OSS
    console.log(res)
    imgs.push({
      title: res.fileName,
      url: res.url
    })
  }
  return imgs
}

</script>

<template>
  <div class="app-bytemd">
    <Editor
      :value="content"
      :plugins="plugins"
      @change="handleChange"
      :locale="zhHans"
      :upload-images="handleUploadImages"
    />
  </div>
</template>

<style lang="scss">
.app-bytemd {
  //覆盖 ByteMD Editor 的默认高度。
  .bytemd {
    height: 800px !important;
  }
}

</style>

引用组件

<script setup lang="ts">

import {ByteMD} from '#/components/bytemd';

import { ref } from 'vue'

//给组件传入值 就是文章的内容
const content= ref<string>()

const handleChange= (value: string) => {
 content.value = value
}


</script>

<template>
  <view>
    <ByteMD
      :value="content"
      :handle-change="handleChange"
    />
  </view>
</template>