前言
普通的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
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即可。