当前位置：首页 > news >正文

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

news 2025/6/27 8:31:13

简介

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文本

或安装使用第三方主题： https://github.com/xitu/juejin-markdown-themes

安装插件

//可选安装插件
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', //编辑器显示模式，默认值：autohandleChange: (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)  //上传到OSSconsole.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>