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;
}
相关推荐
lvchaoq6 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开6 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方7 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
ObjectX前端实验室7 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
技术钱8 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
郝开8 小时前
7. React组件基础样式控制:行内样式,class类名控制
react.js
进阶的鱼13 小时前
React+ts+vite脚手架搭建(四)【mock篇】
前端·javascript·react.js
Keepreal49614 小时前
word文件预览实现
前端·javascript·react.js
郝开14 小时前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
Keepreal49616 小时前
pdf文件预览实现
javascript·react.js