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;
}
相关推荐
前端小书生16 小时前
React 组件渲染
前端·react.js
用户76787977373218 小时前
后端转全栈之Next.js SEO优化
react.js·next.js
Mintopia1 天前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
遂心_1 天前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_1 天前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
YiHanXii1 天前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin2 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了2 天前
React 状态管理
react.js·typescript
天天进步20152 天前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js