/**
* THIS IS AN AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
*/
import React from 'react';
import { getLocale, FormattedMessage } from 'umi';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import '@intlgadmin/braft-extensions/dist/table.css';
import Table from '@intlgadmin/braft-extensions/dist/table';
import gadmin from '@/gadmin';
import editorViewCss from '!!raw-loader!@/generated/styles/braft-editor-view.css';
export type RichTextProps = {
value: string;
onChange: (_value: string) => void;
extendPreviewCss?: string;
};
class RichText extends React.Component {
constructor(props: RichTextProps) {
super(props);
// 解决不回显table的问题
const blockImportFn = Table()[2].importer;
const blockExportFn = Table()[2].exporter;
this.state = {
editorState: BraftEditor.createEditorState(props.value, { blockImportFn, blockExportFn }),
};
BraftEditor.use(
Table({
defaultColumns: 3, // 默认列数
defaultRows: 3, // 默认行数
withDropdown: true, // 插入表格前是否弹出下拉菜单
columnResizable: true, // 是否允许拖动调整列宽，默认false
exportAttrString: 'border="1" style="border-collapse: collapse"', // 指定输出HTML时附加到table标签上的属性字符串
// includeEditors: ['editor-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
// excludeEditors: ['editor-id-2'] // 指定该模块对哪些BraftEditor无效
}),
);
this.extendControls = [
{
key: 'custom-button',
type: 'button',
text: ,
onClick: this.preview,
},
];
this.mediaOptions = {
accepts: {
image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
video: false,
audio: false,
},
uploadFn: this.uploadHandler.bind(this),
};
this.handleChange = this.handleChange.bind(this);
}
static getDerivedStateFromError() {
return null;
}
componentDidCatch(error) {
console.warn(error);
gadmin.aegis?.error(error);
}
preview = () => {
if (window.previewWindow) {
window.previewWindow.close();
}
window.previewWindow = window.open();
window.previewWindow.document.write(this.buildPreviewHtml());
window.previewWindow.document.close();
};
buildPreviewHtml() {
return `
Preview Content
${this.state.editorState.toHTML()}
`;
}
uploadHandler(param) {
if (!param.file) {
return false;
}
const formData = new FormData();
formData.append('file', param.file);
gadmin
.uploadFile(formData)
.then((response) => {
if (!response) {
param.error({ msg: 'Failed to upload.' });
return;
}
param.success({ url: response.data.url });
})
.catch(() => {
param.error({ msg: 'Failed to upload.' });
});
return true;
}
handleChange(editorState) {
this.setState({ editorState });
if (editorState.isEmpty()) {
this.props.onChange('');
} else {
this.props.onChange(editorState.toHTML());
}
}
render() {
const langSwitch = {
'ja': 'jpn'
};
let language = getLocale().split('-')[0] || 'zh';
if(Object.keys(langSwitch).includes(language)) {
language = langSwitch[language];
}
return (
);
}
}
export default RichText;