当前位置: 首页 > news >正文

好用的 Markdown 编辑器组件

ByteMD

bytedance/bytemd: ByteMD v1 repository (github.com)

这里由于我的项目是 Next,所以安装 @bytemd/react, 阅读官方文档,执行命令来安装编辑器主体、以及 gfm(表格支持)插件、highlight 代码高亮插件:

npm i @bytemd/react
npm i @bytemd/plugin-highlight @bytemd/plugin-gfm

但是浏览器的样式不好看,我们可以引入第三方主题:
github-markdown-css

npm install github-markdown-css
import 'github-markdown-css/github-markdown-light.css';

然后使用组件:

src/components/MdEditor/index.tsx

import { Editor } from "@bytemd/react";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import 'github-markdown-css/github-markdown-light.css';
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "./index.css";interface Props {value?: string;onChange?: (v: string) => void;placeholder?: string;
}const plugins = [gfm(), highlight()];/*** Markdown 编辑器* @param props* @constructor*/
const MdEditor = (props: Props) => {const { value = "", onChange, placeholder } = props;return (<div className="md-editor"><Editorvalue={value || ""}placeholder={placeholder}mode="split"plugins={plugins}onChange={onChange}/></div>);
};export default MdEditor;

把 MdEditor 当前输入的值暴露给父组件,便于父组件去使用,同时也是提高组件的通用性,所以定义了属性和属性类型,把 value 和 onChange 事件交给父组件去管理。

src/components/MdEditor/index.css

.md-editor {.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {display: none;}
}

隐藏编辑器中不需要的操作图标(像 GitHub 图标)

编辑好文本,自然有浏览文本的地方,所以浏览器:

src/components/MdViewer/index.tsx

import { Viewer } from "@bytemd/react";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import 'github-markdown-css/github-markdown-light.css';
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "./index.css";interface Props {value?: string;
}const plugins = [gfm(), highlight()];/*** Markdown 浏览器* @param props* @constructor*/
const MdViewer = (props: Props) => {const { value = "" } = props;return (<div className="md-viewer"><Viewer value={value} plugins={plugins} /></div>);
};export default MdViewer;

src/components/MdViewer/index.css

.md-viewer {.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {display: none;}
}

可以在任意客户端渲染页面(或组件)引入组件进行测试,这是因为该组件用到了 useRef 之类的仅客户端才支持的函数。

const [text, setText] = useState<string>('');<MdEditor value={text} onChange={setText} />
<MdViewer value={text} />

md-editor-v3

文本编辑器/md-editor-v3 (gitee.com)

这个是之前写 Vue3 用过的一个编辑器,也很不错,用法简单,同样支持 Vue、React 等。

安装

yarn add md-editor-v3

更多使用及贡献方式参考:md-editor-extension

编辑器模式

<template><MdEditor v-model="text" />
</template><script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const text = ref('# Hello Editor');
</script>

仅预览模式

<template><MdPreview :editorId="id" :modelValue="text" /><MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template><script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

相关文章:

好用的 Markdown 编辑器组件

ByteMD bytedance/bytemd: ByteMD v1 repository (github.com) 这里由于我的项目是 Next&#xff0c;所以安装 bytemd/react&#xff0c; 阅读官方文档&#xff0c;执行命令来安装编辑器主体、以及 gfm&#xff08;表格支持&#xff09;插件、highlight 代码高亮插件&#xf…...

uniapp vite3 require导入commonJS 的js文件方法

vite3 导入commonJS 方式导出 在Vite 3中&#xff0c;你可以通过配置vite.config.js来实现导入CommonJS&#xff08;CJS&#xff09;风格的模块。Vite 默认支持ES模块导入&#xff0c;但如果你需要导入CJS模块&#xff0c;可以使用特定的插件&#xff0c;比如originjs/vite-pl…...

通义灵码用户说:“人工编写测试用例需要数十分钟,通义灵码以毫秒级的速度生成测试代码,且准确率和覆盖率都令人满意”

通过一篇文章&#xff0c;详细跟大家分享一下我在使用通义灵码过程中的感受。 一、定义 通义灵码&#xff0c;是一个智能编码助手&#xff0c;它基于通义大模型&#xff0c;提供代码智能生成、研发智能问答能力。 在体验过程中有任何问题均可点击下面的连接前往了解和学习。 …...

MySQL中的约束

约束概述 1.1 为什么需要约束 数据完整性&#xff08;Data Integrity&#xff09;是指数据的精确性&#xff08;Accuracy&#xff09;和可靠性&#xff08;Reliability&#xff09;。它是防止数据库中存在不符合语义规定的数据和防止因错误信息的输入输出造成无效操作或错误信…...

Leetcode 寻找重复数

可以使用 位运算 来解决这道题目。使用位运算的一个核心思想是基于数字的二进制表示&#xff0c;统计每一位上 1 的出现次数&#xff0c;并与期望的出现次数做比较。通过这种方法&#xff0c;可以推断出哪个数字重复。 class Solution { public:int findDuplicate(vector<i…...

大一新生以此篇开启你的算法之路

各位大一计算机萌新们&#xff0c;你们好&#xff0c;本篇博客会带领大家进行算法入门&#xff0c;给各位大一萌新答疑解惑。博客文章略长&#xff0c;可根据自己的需要观看&#xff0c;在博客中会有给大一萌新问题的解答&#xff0c;请不要错过。 入门简介&#xff1a; 算法…...

【AI大模型】ChatGPT模型原理介绍(上)

目录 &#x1f354; 什么是ChatGPT&#xff1f; &#x1f354; GPT-1介绍 2.1 GPT-1模型架构 2.2 GPT-1训练过程 2.2.1 无监督的预训练语言模型 2.2.2 有监督的下游任务fine-tunning 2.2.3 整体训练过程架构图 2.3 GPT-1数据集 2.4 GPT-1模型的特点 2.5 GPT-1模型总结…...

基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(五):Blender锥桶建模

前言 本系列教程旨在使用UE5配置一个具备激光雷达深度摄像机的仿真小车&#xff0c;并使用通过跨平台的方式进行ROS2和UE5仿真的通讯&#xff0c;达到小车自主导航的目的。本教程默认有ROS2导航及其gazebo仿真相关方面基础&#xff0c;Nav2相关的学习教程可以参考本人的其他博…...

C++竞赛初阶L1-15-第六单元-多维数组(34~35课)557: T456507 图像旋转

题目内容 输入一个 n 行 m 列的黑白图像&#xff0c;将它顺时针旋转 90 度后输出。 输入格式 第一行包含两个整数 n 和 m&#xff0c;表示图像包含像素点的行数和列数。1≤n≤100&#xff0c;1≤m≤100。 接下来 n 行&#xff0c;每行 m 个整数&#xff0c;表示图像的每个像…...

无线领夹麦克风哪个牌子好?西圣、罗德、猛犸领夹麦克风深度评测

​如今短视频和直播行业蓬勃发展&#xff0c;无线领夹麦克风成为了许多创作者不可或缺的工具。然而&#xff0c;市场上的无线领夹麦克风品牌众多、质量参差不齐&#xff0c;为了帮助大家挑选到满意的产品&#xff0c;我作为数码测评博主&#xff0c;对无线领夹麦克风市场进行了…...

React Native 0.76,New Architecture 将成为默认模式,全新的 RN 来了

关于 React Native 的 New Architecture 概念&#xff0c;最早应该是从 2018 年 RN 团队决定重写大量底层实现开始&#xff0c;因为那时候 React Native 面临各种结构问题和性能瓶颈&#xff0c;最终迫使 RN 团队开始进行重构。 而从 React Native 0.68 开始&#xff0c;New A…...

Java并发:互斥锁,读写锁,Condition,StampedLock

3&#xff0c;Lock与Condition 3.1&#xff0c;互斥锁 3.1.1&#xff0c;可重入锁 锁的可重入性&#xff08;Reentrant Locking&#xff09;是指在同一个线程中&#xff0c;已经获取锁的线程可以再次获取该锁而不会导致死锁。这种特性允许线程在持有锁的情况下&#xff0c;可…...

客户端负载均衡Ribbon实例

文章目录 一&#xff0c;概述二&#xff0c;实现过程三&#xff0c;项目源码1. 源码放送&#xff1a;2. 部署方式 四&#xff0c;功能演示五&#xff0c;其他 一&#xff0c;概述 一般来说&#xff0c;提到负载均衡&#xff0c;大家一般很容易想到浏览器 -> NGINX -> 反…...

MySQL数据库负载均衡

数据库负载均衡是通过将数据库请求分散到多个数据库服务器上&#xff0c;以提高数据库的处理能力和可用性。在高并发的场景下&#xff0c;使用数据库负载均衡器可以有效避免单点故障&#xff0c;提高系统的整体性能和可靠性。 数据库负载均衡器 数据库负载均衡器可以是硬件设…...

达梦CASE_SENSITIVE参数解析

1. 参数含义 标识符大小写敏感&#xff0c;默认值为 Y。 当大小写敏感时&#xff0c;小写的标识符应用双引号括起&#xff0c;否则被转换为大写&#xff1b;当大小写不敏感时&#xff0c;系统不自动转换标识符的大小写&#xff0c;在标识符比较时也不区分大小写。 CASE_SENS…...

酒店智能轻触开关工作原理

在现代化酒店中&#xff0c;智能轻触开关已成为提升宾客居住体验的重要设备之一。这些开关不仅操作便捷&#xff0c;而且功能丰富&#xff0c;能够实现对灯光、窗帘、空调等设备的精准控制。本文将深入探讨酒店智能轻触开关的工作原理。 一、智能轻触开关的基本概念 智能轻触开…...

web基础之RCE

简介&#xff1a;RCE称为远程代码执行漏洞&#xff1b;是互联网的一种安全漏洞&#xff1b;攻击者可以直接向后台服务器远程注入操作系统命令&#xff1b;从而操控后台系统&#xff1b;也是CTF比较常考的一个方面 1、eval执行 &#xff08;1&#xff09;分析后端代码&#xf…...

c语言--水仙花数,求Sn的前五项和

用C语言实现输出水仙花数 什么是“水仙花数”&#xff1f; 所谓“水仙花数”是指一个n位数&#xff0c;其各位数字n次方之和等于该数本身。 例如&#xff1a;1531 ^3 5 ^3 3 ^3 如何求解水仙花数&#xff1f; 思路&#xff1a; 步骤1&#xff1a;先计算出数i的位数&#x…...

SpringBoot教程(二十八) | SpringBoot集成Elasticsearch(Java High Level Rest Client方式)

SpringBoot教程&#xff08;二十八&#xff09; | SpringBoot集成Elasticsearch&#xff08;Java High Level Rest Client方式&#xff09; 前言添加maven依赖yml配置ElasticsearchConfig 连接配置类EsUtil 工具类开始测试 前言 由ES官方提供&#xff0c;代码语法和DSL语法相似…...

【Vue3】常用的响应式数据类型

ref 定义基本类型 <template><div>{{ sum }}</div> </template><script setup> import { ref } from vuelet sum ref(10)const btn () > {sum.value 200 } </srcipt>reactive 定义复杂类型 <template><div>{{ sum }…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...