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;
}
相关推荐
小鱼儿亮亮11 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
小鱼儿亮亮11 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
xiaominlaopodaren11 小时前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
weixin_4233919313 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919313 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ13 小时前
第三代 React,怎么玩?
前端·javascript·react.js
代码小学僧14 小时前
🎉 在 Tailwind 中愉快的使用 Antd Design 色彩
前端·css·react.js
爱学习的茄子14 小时前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
Mintopia18 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
柯南二号18 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js