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

1.简介

react-md-editor是一款markdown编辑器，本文介绍如何在Next.js中使用它。

2.安装

安装命令：

npm install @uiw/react-md-editor

3.MD编辑器

markdown编辑器的使用：

"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：

"use client";
import MDEditor from '@uiw/react-md-editor';

export default function MarkDown({source}){
    return (
            <MDEditor.Markdown source={source}/>
    )
}

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

import MarkDown from '@/components/MarkDown'//导入上面组件

export default function MarkShow(){
...//获取markdown内容的text
return (
<div className="./markdowndiv">
<MarkDown source={text} />
</div>
)
}

在ccs中添加以下内容就可以修改markdown显示器的背景颜色了：

markdowndiv div{
background-color:  #203853;
}

原文地址：https://blog.csdn.net/a827143452/article/details/142660076

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！