基于Vue3、ByteMD打造掘金同款markdown编辑器（一）
安装ByteMD依赖
pnpm install bytemd
安装ByteMD的Vue3依赖@bytemd/vue-next
pnpm install @bytemd/vue-next
安装插件@bytemd/plugin-gfm
pnpm install @bytemd/plugin-gfm
插件作用：支持GFM（自动链接文字、删除线、表格、任务列表）
引入ByteMD样式
import 'bytemd/dist/index.css'
汉化ByteMD
import zhHans from 'bytemd/locales/zh_Hans.json# data函数中声明
data() {return {zhHans}
}
# 绑定属性
<Editor :locale="zhHans" :value="value" :plugins="plugins" @change="handleChange" />
安装 @bytemd/plugin-gemoji
pnpm install @bytemd/plugin-gemoji
支持Gemoji短代码
安装@bytemd/plugin-highlight
pnpm install @bytemd/plugin-highlight
支持代码块高亮
安装 @bytemd/plugin-frontmatter
pnpm install @bytemd/plugin-frontmatter
解析前题（啥意思？）
安装 @bytemd/plugin-medium-zoom
pnpm install @bytemd/plugin-medium-zoom
缩放图片
安装掘金主题
pnpm install juejin-markdown-themes
安装@bytemd/plugin-breaks
pnpm install @bytemd/plugin-breaks
支持休息（啥意思？）
图片上传功能
通过定义uploadImages实现图像上传
- 完整代码
html 代码解读复制代码<template><div class="markdow-page"><Editor :locale="zh" :upload-images="handleUploadFile" :value="value" :plugins="plugins" @change="handleChange" /></div>
</template>
<script setup>
import { reactive, toRefs, markRaw } from 'vue'
import { Editor } from '@bytemd/vue-next'
import gfm from '@bytemd/plugin-gfm'
import gemoji from '@bytemd/plugin-gemoji'
import highlight from '@bytemd/plugin-highlight' // 代码高亮
import frontmatter from '@bytemd/plugin-frontmatter' // 解析前题
import mediumZoom from '@bytemd/plugin-medium-zoom' // 缩放图片
import breaks from '@bytemd/plugin-breaks'
import zhHans from 'bytemd/locales/zh_Hans.json'
import 'bytemd/dist/index.css'
import 'juejin-markdown-themes/dist/juejin.min.css' // 掘金同款样式// 内容控件所支持的特殊功能插件列表，如：支持代码高亮、图片优化等。
const pluginsList = [gfm(),gemoji(),highlight(),frontmatter(),mediumZoom(),breaks(),//
]
const state = reactive({value: '',plugins: markRaw(pluginsList),zh: zhHans,
})
const { value, plugins, zh } = toRefs(state)const handleChange = val => {state.value = val
}
const handleUploadFile = files => {let imgUrl = 'https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2Fd01373f082025aaf7ee4d3c473a75d68024f1a46.jpeg%40f_auto%3Ftoken%3D494d4c323769e5dd89e717ab39dd3ea1&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1698339600&t=627f5e7dc03e0de8d0f69b1030a2d08f'let fromData = new FormData()fromData.append('file', files[0])// const res = await uploadImg(fromData)// console.log(res)return [{title: 'xxx',url: imgUrl,},]
}
</script>
<style lang="scss" scoped>
.markdow-page {width: 100%;height: 100vh;:deep() {.bytemd {height: calc(100vh - 200px);}}
}
</style>.markdow-page {width: 100%;height: 100vh;:deep() {.bytemd {height: calc(100vh - 200px);}}
}
</style>
