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;
}
相关推荐
然我13 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
马特说3 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽3 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课4 小时前
React useEffect 详解与运用
前端·react.js
中微子4 小时前
React Props 传值规范详解
前端·react.js
卸任4 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
LeeAt4 小时前
React Hooks 编程:useState和useEffect的详解
前端·react.js
Dream耀4 小时前
React Hooks 指南:useState 与 useEffect 的用法与技巧
前端·javascript·react.js
我想说一句4 小时前
React Hooks 生存指南:让你的函数组件"活"起来 🧬
前端·javascript·react.js
LeeAt4 小时前
AI单词拍照识别移动端项目(一)
前端·react.js·ai编程