Ant design pro-项目探究（7）react的markdown编辑器

前言

普通的input和textarea已满足大部分的文本记录，但想要让输入文本更加多样化，markdown编辑器可谓是yyds。但是vue版本的markdown编辑器众多，基于react版本的编辑器就相当少一些。以下是整合和探究react版本的markdown的实践。

react-markdown-editor-lite 官网或者直接搜索即可获得安装的办法

npm install react-markdown-editor-lite --save
# or
yarn add react-markdown-editor-lite

结合markdown-it

npm install markdown-it --save

页面引入样式、react-markdown-editor-lite，结合markdown-it

import MarkdownIt from markdown-it;
import MdEditor from react-markdown-editor-lite;
// 导入编辑器的样式，不导入会出现毫无样式情况
import react-markdown-editor-lite/lib/index.css;

组件调用

const Demo = () => {
          
   
// 数据保存
const [value, setValue] = useState("")
	// markdown-it 利用设置参数，具体查询markdown-it官网
  const mdParser = new MarkdownIt({
          
   
    html: true,
    linkify: false,
    typographer: true
  		}).enable(image);
	}
	// 检测markdown数据变化
  function handleEditorChange({
          
   html, text}) {
          
   
    setValue(text)
    console.log(handleEditorChange, html, text);
   }
return (
	<MdEditor
        value={
          
   value}
        onChange={
          
   handleEditorChange}
        renderHTML={
          
   text => mdParser.render(text)}
        style={
          
   
          {
          
   height: 400}
        }
        onImageUpload={
          
   
          async (file) => {
          
   
            const formData = new FormData()
            formData.append(files, file)
            // 自行图片上传功能，利用form文件表单
            return await postUrl(formData).then(
              (res => {
          
   
                if (res.code === 200) {
          
   
                  return res.data
                } else {
          
   
                  message.error("图片过大，请上传小于1mb的图片")
                }
              })
            )
          }
        }
      >
      </MdEditor>
	)
}

至于其他功能可以利用markdown-it进行设置 总结 markdown的编辑器的调用并不困难，但是在实现图片上传这个功能时还是遇到了瓶颈，主要跟请求拦截器那块有了冲突，要先去掉拦截器的请求头部，让自动生成headers即可。