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;
}