Vue3引入markdown编辑器--Bytemd

字节跳动开源了一款markdown编辑器，bytemd，项目地址：GitHub - bytedance/bytemd: ByteMD v1 repository

安装

npm i @bytemd/vue-next

引入方式如下，再main.js中引入样式

import 'bytemd/dist/index.css'

直接封装一个Markdown编辑器

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import { Editor, Viewer } from "@bytemd/vue-next";
import { withDefaults, defineProps } from "vue";
import highlight from "@bytemd/plugin-highlight";

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

// 定义组件属性类型
interface Props {
  value: string;
  handleChange: (v: string) => void;
}

const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  handleChange: (v: string) => {
    console.log(v);
  },
});
</script>

封装一个Markdown展示组件

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

<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import { Viewer } from "@bytemd/vue-next";
import { withDefaults, defineProps } from "vue";
import highlight from "@bytemd/plugin-highlight";

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

// 定义组件属性类型
interface Props {
  value: string;
}

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

接下来就可以在需要用到的地方引入组件就可以了。