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博客

相关推荐

  1. vue3文本编辑器@wangeditor一些配置

    2024-07-09 23:08:07       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 23:08:07       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 23:08:07       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 23:08:07       58 阅读
  4. Python语言-面向对象

    2024-07-09 23:08:07       69 阅读

热门阅读

  1. C#用链表和数组分别实现堆栈

    2024-07-09 23:08:07       24 阅读
  2. Go bytes包

    2024-07-09 23:08:07       26 阅读
  3. C#面 :ASP.Net Core中有哪些异常处理的方案?

    2024-07-09 23:08:07       25 阅读
  4. Redis

    2024-07-09 23:08:07       26 阅读
  5. 大语言模型应用--AI工程化落地

    2024-07-09 23:08:07       21 阅读
  6. 64.ThreadLocal造成的内存泄漏

    2024-07-09 23:08:07       23 阅读
  7. 实例分割:深度学习在图像识别中的突破

    2024-07-09 23:08:07       25 阅读
  8. el-table 树状表格展开及折叠

    2024-07-09 23:08:07       24 阅读
  9. pytorch LLM训练过程中的精度调试实践

    2024-07-09 23:08:07       19 阅读
  10. 【TORCH】神经网络权重初始化和loss为inf

    2024-07-09 23:08:07       18 阅读