1、安装
yarn add md-editor-rt@2.0.0
2、使用
import React, { useState } from 'react';
import MdEditor, { ToolbarTips } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
export default ({ }: any) => {
const [text, setText] = useState<any>()
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',
]);
const onUploadImg = async (files: any, callback: any) => {
const res = await Promise.all(
files.map((file: any) => {
return new Promise((rev, rej) => {
const form = new FormData();
form.append('file', file);
const _url = '';
fetch(_url, {
method: 'post',
headers: {
token: getCookie('token') || '',
},
body: form,
})
.then((response) => response.json())
.then((data) => {
rev(data);
})
.catch((error) => console.error(error));
});
}),
);
callback(res.map((item) => item.rows[0].shareUrl));
};
return (
<MdEditor
modelValue={text}
onChange={setText}
onUploadImg={onUploadImg}
toolbars={toolbars}
/>
);
};
3、使用效果