推荐一个很好用的一个react-markdowm编辑器
🚄首先是安装:
yarn add md-editor-rt
或
tnpm i md-editor-rt -S
或
npm i md-editor-rt -S
🚃他的使用:
import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
export default function Md() {
const [text, setText] = useState('hello md-editor-rt!');
return <Editor modelValue={text} onChange={setText} />;
}
示例图:
🤗图片上传:
默认可以选择多张图片,支持截图粘贴板上传图片,支持复制网页图片粘贴上传。
图片裁剪上传只支持选择一张图片~,但回调入仍是一个文件数组。
注意:粘贴板上传时,如果是网页上的 gif 图,无法正确上传为 gif 格式!请保存本地后再手动上传。
const onUploadImg = async (files, callback) => {
const res = await Promise.all(
Array.from(files).map((file) => {
return new Promise((rev, rej) => {
const form = new FormData();
form.append('file', file);
axios
.post('/api/img/upload', form, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((res) => rev(res))
.catch((error) => rej(error));
});
})
);
callback(res.map((item) => item.data.url));
};
🎉顶部工具栏调整:
支持调整工具栏内容顺序和分割符了。
可以随意排序工具栏,通过'-'
分割两个工具,通过'='
实现左右放置!
'bold', 'underline', 'italic', '-', 'strikeThrough', 'sub', 'sup', 'quote', 'unorderedList',
'orderedList', '-', 'codeRow', 'code', 'link', 'image', 'table', '-', 'revoke', 'next', 'save',
'=', 'pageFullscreen', 'fullscreen', 'preview', 'htmlPreview', 'catalog', 'github'
// 对应功能名称
'加粗', '下划线', '斜体', '删除线', '下标', '上标', '引用', '无序列表',
'有序列表', '行内代码', '块级代码', '链接', '图片', '表格', '后退一步', '前进一步', '保存',
'页面内全屏', '屏幕全屏', '内容预览', 'html代码预览', '目录', '源码地址
=
import React, { useState } from 'react';
import Editor, { ToolbarTips } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
export default function Md() {
const [text, setText] = useState('hello md-editor-rt!');
const [toolbars] = useState<(keyof ToolbarTips)[] | undefined>(
[
'bold',
'underline',
'italic',
'-',
'strikeThrough',
'title',
'sub',
'sup',
'quote',
'unorderedList',
'orderedList',
'-',
'codeRow',
'code',
'link',
'image',
'table',
'-',
'revoke',
'next',
'save',
'=',
'pageFullscreen',
'fullscreen',
'preview',
'htmlPreview',
]
);
return <Editor
modelValue={text}
onChange={setText}
toolbars={toolbars}
/>;
}
🎉图片示例:
会自动把markdown的内容整合好 放到右边的目录结构中 方便查看
😜这里是简答的markdown的用法,详细配置可自行去源码地址查看
😜如果你用的typescript 他的类型 在他的文档中都有描述