Next.js 14 使用 react-md-editor 编辑器 并更改配景颜色

1.简介

react-md-editor是一款markdown编辑器，本文先容怎样在Next.js中使用它。


2.安装

安装下令：

1. npm install @uiw/react-md-editor

复制代码

3.MD编辑器

markdown编辑器的使用：

1. "use client"
2. import MDEditor from '@uiw/react-md-editor';
3. ...
4. export default function MarkDown(){
5.         <MDEditor
6.               value={content}
7.               onChange={setContent}
8.               textareaProps={{
9.                   placeholder: '请输入内容'
10.                 }}
11.           />
12. }

复制代码

4. MD表现器

markdown表现器的使用，界说组件MarkDown.js：

1. "use client";
2. import MDEditor from '@uiw/react-md-editor';
4. export default function MarkDown({source}){
5.     return (
6.             <MDEditor.Markdown source={source}/>
7.     )
8. }

复制代码

使用组件（以下页面使用SSR）：

1. import MarkDown from '@/components/MarkDown'//导入上面组件
3. export default function MarkShow(){
4.         ...//获取markdown内容的text
5.         return (
6.                 <div className="./markdowndiv">
7.                 <MarkDown source={text} />
8.                 </div>
9.         )
10. }

复制代码

在ccs中添加以下内容就可以修改markdown表现器的配景颜色了：

1. markdowndiv div{
2.         background-color:  #203853;
3. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金