Vue3使用markdown编辑器之Bytemd

程序员大佬超2024-07-10 0:37

官网地址：https://bytemd.js.org/playground

GitHub地址：https://github.com/bytedance/bytemd

ByteMD 是字节跳动出品的富文本编辑器，功能强大，可以免费使用，而且支持很多掘金内置的主题，写作体验很棒。

ByteMD 编辑器使用 Svelte 框架开发，支持原生、Vue、React、Svelte 框架集成，几乎适用于所有前端开发人员。

有两个组件：Editor 和 Viewer。Editor 顾名思义就是 Markdown 编辑器；Viewer 通常用于显示渲染的 Markdown 结果，无需编辑。

安装：

shell 复制代码

npm install @bytemd/vue-next

shell 复制代码

# 安装辅助插件，例如gfm（表格支持）插件、highlight 代码高亮插件、GitHub风格的Markdown CSS框架
npm install @bytemd/plugin-gfm
npm install @bytemd/plugin-highlight
npm install github-markdown-css

封装组件

MdViewer.vue

html 复制代码

<template>
	<Viewer :value="value" :plugins="plugins" />
</template>

<script setup lang="ts">
	import { Viewer } from "@bytemd/vue-next";
	import gfm from "@bytemd/plugin-gfm";
	import highlight from "@bytemd/plugin-highlight";
	import "bytemd/dist/index.css";
	import "highlight.js/styles/default.css";
	import "github-markdown-css/github-markdown-light.css";
	// import "github-markdown-css/github-markdown-dark.css";

	const plugins = [
		gfm(), 
		highlight()
	];

	interface Props {
		value : string;
	}

	const props = withDefaults(defineProps<Props>(), {
		value: () => {
			return "";
		},
	});
</script>

使用

html 复制代码

import MdViewer from "./MdViewer.vue";

html 复制代码

<md-viewer :value="mdContent" />

效果：