Next.js 14 使用 react-md-editor 编辑器 并更改背景颜色

1.简介

react-md-editor是一款markdown编辑器,本文介绍如何在Next.js中使用它。

2.安装

安装命令:

bash 复制代码
npm install @uiw/react-md-editor

3.MD编辑器

markdown编辑器的使用:

javascript 复制代码
"use client"
import MDEditor from '@uiw/react-md-editor';
...
export default function MarkDown(){
	<MDEditor
	      value={content}
	      onChange={setContent}
	      textareaProps={{
	          placeholder: '请输入内容'
	        }}
	  />
}

4. MD显示器

markdown显示器的使用,定义组件MarkDown.js:

javascript 复制代码
"use client";
import MDEditor from '@uiw/react-md-editor';

export default function MarkDown({source}){
    return (
            <MDEditor.Markdown source={source}/>
    )
}

使用组件(以下页面使用SSR):

javascript 复制代码
import MarkDown from '@/components/MarkDown'//导入上面组件

export default function MarkShow(){
	...//获取markdown内容的text
	return (
		<div className="./markdowndiv">
		<MarkDown source={text} />
		</div>
	)
}

在ccs中添加以下内容就可以修改markdown显示器的背景颜色了:

css 复制代码
markdowndiv div{
	background-color:  #203853;
}
相关推荐
JasperX1 小时前
1700+ Emoji 怎么找?我花 2 天做了个搜索站 (已开源)
next.js
天蓝色的鱼鱼1 小时前
Next.js的水合:静默的页面“唤醒”术
前端·react.js·next.js
lapiii3585 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12155 小时前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
LRH6 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
歪歪1006 小时前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
XiaoSong7 小时前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
im_AMBER21 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界21 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
今天头发还在吗1 天前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design