ByteMD富文本编辑器的vue3配置

Git地址：GitHub - bytedance/bytemd: ByteMD v1 repository

控制面板输入

 npm install @bytemd/vue-next

下载成功后在src/main.ts中引用

import "bytemd/dist/index.css";

引入后保存，下面是一些插件，比如说我用到gmf和hightLight，下面就以这个举例

npm install 你需要的插件

在我这里为：

npm install @bytemd/plugin-gfm

npm install @bytemd/plugin-highlight

下载成功后，可以新建一个vue模板

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>
<script setup lang="ts">
import gfm from "@bytemd/plugin-gfm";
import hightlight from "@bytemd/plugin-highlight";
import { Editor, Viewer } from "@bytemd/vue-next";
import { ref } from "vue";
//我使用的为gmf，highlight，可以根据自己的需要在plugins和import中引用
const plugins = [
  gfm(),
  hightlight(),
  // Add more plugins here
];
const value = ref("");
//输入文本之后，触发该事件，就可以在这里获取到值
const handleChange = (v: string) => {
  value.value = v;
};
</script>

<style scoped></style>

如果出现报错提示：ESLint: Delete `␍`(prettier/prettier)

参考文章

ESLint: Delete `␍`(prettier/prettier)解决问题补充-CSDN博客