基于Vue3、ByteMD打造掘金同款markdown编辑器（一）

基于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>