forked from Gitlink/forgeplus-react
124 lines
3.3 KiB
JavaScript
124 lines
3.3 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
|
||
import '@wangeditor/editor/dist/css/style.css';
|
||
import cookie from 'react-cookies';
|
||
import { message, Spin } from 'antd';
|
||
import axios from 'axios';
|
||
|
||
// 富文本编辑器
|
||
function MyEditor(props) {
|
||
const {value, setValue, uploadUrl, videoUploadUrl} = props;
|
||
// editor 实例
|
||
const [editor, setEditor] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
// 模拟 ajax 请求，异步设置 html
|
||
useEffect(() => {
|
||
if(value && setValue){
|
||
setValue(value);
|
||
}
|
||
}, []);
|
||
|
||
// 工具栏配置
|
||
const toolbarConfig = {};
|
||
// 隐藏 代办
|
||
toolbarConfig.excludeKeys = [
|
||
'todo'
|
||
]
|
||
|
||
// 编辑器配置
|
||
const editorConfig = {
|
||
placeholder: '请输入内容...',
|
||
MENU_CONF:{
|
||
uploadImage:{
|
||
server: uploadUrl,
|
||
headers: {
|
||
Authorization: cookie.load('autologin_trustie')
|
||
},
|
||
withCredentials: true,
|
||
fieldName: "file",
|
||
maxFileSize: 20 * 1024 * 1024,
|
||
allowedFileTypes: ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml", "image/bmp"],
|
||
customInsert(res, insertFn){
|
||
const {url} = res;
|
||
insertFn(url, "图片", url);
|
||
},
|
||
onBeforeUpload(file){
|
||
const {type, name} = Object.values(file)[0];
|
||
const typeRange = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml", "image/bmp"];
|
||
const suffix = name && name.split(".")[1];
|
||
const isType = typeRange.indexOf(type) !== -1 && suffix !== "tiff";
|
||
if(!isType){
|
||
message.error("只能上传jpg、jpeg、webp、png、svg、gif、bmp格式的图片!")
|
||
return false;
|
||
}
|
||
return file;
|
||
},
|
||
onError(file, err) {
|
||
message.error(`${file.name} 上传出错, ${err}` )
|
||
},
|
||
},
|
||
uploadVideo:{
|
||
// 自定义上传视频
|
||
async customUpload(file, insertFn){
|
||
if (!file.type.includes("video")) {
|
||
return message.error("请上传视频格式的文件！");
|
||
} else if (file.size / 1024 / 1024 > 200) {
|
||
return message.error("请上传200M以内的文件！");
|
||
}
|
||
const formData = new FormData();
|
||
formData.append("file", file);
|
||
setLoading(true);
|
||
axios.post(videoUploadUrl || uploadUrl, formData, {headers: {Authorization: cookie.load('autologin_trustie')}}).then(res=>{
|
||
setLoading(false);
|
||
if(res && res.data && res.data.code === 200){
|
||
insertFn(res.data.url)
|
||
}else{
|
||
message.error(res && res.data && res.data.msg)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 及时销毁 editor ，重要！
|
||
useEffect(() => {
|
||
return () => {
|
||
if (editor === null) return;
|
||
editor.destroy();
|
||
setEditor(null);
|
||
};
|
||
}, [editor]);
|
||
|
||
const editorBoxClass = {
|
||
border: '1px solid #ccc',
|
||
zIndex: 100,
|
||
'video': {
|
||
maxWidth: '100%'
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div style={editorBoxClass}>
|
||
<Spin spinning={loading} tip="上传中，请耐心等待">
|
||
<Toolbar
|
||
editor={editor}
|
||
defaultConfig={toolbarConfig}
|
||
mode="default"
|
||
style={{ borderBottom: '1px solid #ccc' }}
|
||
/>
|
||
<Editor
|
||
defaultConfig={editorConfig}
|
||
value={value}
|
||
onCreated={setEditor}
|
||
onChange={(editor) => setValue && setValue(editor.getHtml())}
|
||
mode="default"
|
||
style={{ height: '500px', overflowY: 'hidden' }}
|
||
/>
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default MyEditor; |