import React, { useState, useEffect, useLayoutEffect } from 'react'; import { Modal, Row, Col, Space, Form, Input, Select, message, Upload, Button } from 'antd'; import { ScissorOutlined } from '@ant-design/icons'; import { getAgent } from '@/services/agent'; import { postOrPutNotice } from '@/services/notice'; import { uploadFile } from '@/services/user'; // import ReactWEditor from 'wangeditor-for-react'; // 引入编辑器组件 import BraftEditor, { ControlType, ExtendControlType, ImageControlType } from 'braft-editor'; // 引入编辑器样式 import 'braft-editor/dist/index.css'; import { ContentUtils } from 'braft-utils'; import { baseUrl } from '@/utils/request'; import type { noticeModalProps } from './data'; import type { Dispatch } from 'umi'; import { useIntl } from 'react-intl'; import { Role } from '@/models/user'; const layout = { labelCol: { span: 5 }, wrapperCol: { span: 16 }, }; // 定义rem基准值 const sizeBase = 23.4375; interface IProps { dispatch: Dispatch; roleList: Role[]; } interface EditorDemoProps { editorContent: string; changeContent: (content: string) => void; } class EditorDemo extends React.Component { state = { // 创建一个空的editorState作为初始值 editorState: BraftEditor.createEditorState(null), editorInstance: null, }; async componentDidMount() { // 假设此处从服务端获取html格式的编辑器内容 const htmlContent = this.props.editorContent; console.log(htmlContent, 'htmlContenthtmlContenthtmlContent'); // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat this.setState({ editorState: BraftEditor.createEditorState(htmlContent), }); console.log(this.state.editorInstance.getValue(), '222'); } submitContent = async () => { // 在编辑器获得焦点时按下ctrl+s会执行此方法 // 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容 // const htmlContent = this.state.editorState.toHTML() // const result = await saveEditorContent(htmlContent) }; handleEditorChange = (editorState) => { console.log(editorState.toHTML(), 'editorState'); this.setState({ editorState }); this.props.changeContent(editorState.toHTML()); }; handleChange = ({ fileList }: { fileList: Record }): void => { console.log(fileList, 'fileList'); const len = fileList.length - 1; if (fileList[len]?.status === 'done') { if (fileList[len].response.code === 0) { console.log(fileList[len].response.data, ' fileList[len].response.data'); this.setState({ editorState: ContentUtils.insertMedias(this.state.editorState, [ { type: 'IMAGE', url: fileList[len].response.data + `?imageView2/1/w/343/h/192`, width: '343px', height: '192px', }, ]), }); } } }; circleImg = (mediaData) => { console.log(mediaData, 'mediaDatamediaData'); const { url }: { url: string } = mediaData; if (url.includes('?imageView2')) { mediaData.url = mediaData.url.split('?imageView2')[0]; } else { mediaData.url = mediaData.url + `?imageView2/1/w/${parseInt(mediaData.width)}/h/${parseInt(mediaData.height)}`; } }; render() { const controls = [ 'bold', 'italic', 'underline', 'text-color', 'separator', 'list-ul', 'list-ol', 'emoji', 'text-indent', 'headings', 'clear', 'hr', 'blockquote', 'font-size', 'line-height', ]; const extendControls: ExtendControlType[] = [ { key: 'antd-uploader', type: 'component', component: ( ), }, ]; const hooks = { 'set-image-size': ({ width, height }) => { console.log(width, 'widthwidth'); let _width = width; if (_width === undefined) { _width = '343rpx'; } if (parseInt(_width) !== 343) { message.warning('图片宽度默认为343'); return false; } return { width: _width, height: height, }; }, }; const imageControls: ImageControlType[] = [ // 'float-left', // 'float-right', // { // text: '裁剪图片', // render: (mediaData) => ( // // this.circleImg(mediaData)} /> // // ), // }, 'size', 'remove', ]; const { editorState } = this.state; return (
(this.state.editorInstance = instance)} extendControls={extendControls} value={editorState} onChange={this.handleEditorChange} />
); } } type NoticeModalProps = noticeModalProps | IProps; const NoticeModal: React.FC = ({ GetNotice, type, closeModal, visible, curNoticeData, dispatch, roleList, }) => { console.log(roleList, 'roleListroleList'); const [form] = Form.useForm(); const [label, setLabel] = useState(''); const [content, setContent] = useState(''); // editContent 反填 const [editContent, setEditContent] = useState(''); // 反填表单时的值 const [editForm, setEditForm] = useState({}); useEffect(() => { onFill(); dispatch({ type: 'user/getRoleList', payload: { curPage: 1, passSize: 100, }, }); }, []); // 新增或者编辑公告 const PostOrPutNotice = async (record: any): Promise => { const { code, data } = await postOrPutNotice({ ...record }); if (code === 0 && data) { message.success(type === 1 ? '编辑成功' : '新增成功'); } else { message.success(type === 1 ? '编辑失败' : '新增失败'); } closeModal(); GetNotice(); }; // 反填表单 const onFill = (): void => { console.log(curNoticeData, '反填表单'); const $par = { ...curNoticeData }; form.setFieldsValue($par); setEditForm($par); setEditContent(curNoticeData.content); }; const onFinish = (values: any) => { console.log(values, 'values'); console.log(content, 'contentcontent'); if (content === '

') { message.error('请填写公告内容'); return; } let $par; if (type === 1) { $par = { ...editForm, ...values, userIds: ['ALL'], roles: values.roles, type: 'ANN', methodType: type, content, }; } else { $par = { ...values, userIds: ['ALL'], roles: values.roles, type: 'ANN', methodType: type, content, }; } console.log($par); PostOrPutNotice($par); }; // 提交表单 const onsubmit = () => form.submit(); // 设置标题 const changeLabel = (e: React.ChangeEvent): void => setLabel(e.target.value); // 内容 const changeContent = (content: string): void => setContent(content); return ( onsubmit()} onCancel={closeModal} >
); }; export default NoticeModal;