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;
}
相关推荐
fightingles1 小时前
使用useOptimistic优雅实现状态预更新
react.js
小脑斧呀1 小时前
React 的挂载都发生了什么
react.js
前端极客探险家4 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya4 小时前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me4 小时前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__5 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
随笔记5 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
╰つ゛木槿7 小时前
Vue与React区别分析
前端·vue.js·react.js
旭久16 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain16 小时前
ant design pro 模版简化工具
前端·react.js·ant design