odjbin/fateverse-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成大致富文本编辑器（因为本地下载引入一直出错，暂时先用云加载）

Browse Source
This commit is contained in:
Lhk0001
2023-11-23 13:24:15 +08:00
parent 95b5604801
commit a6b6c20ffe
2 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/view/system/notice/publish/index.scss
View File

@@ -58,4 +58,7 @@
height: 20px;
margin-right: 10px;
}
}
.tox,.tox-tinymce{
width: 700px;
}

210
src/view/system/notice/publish/index.tsx
View File

@@ -3,7 +3,6 @@ import {
Button,
Input,
Select,
DatePicker,
message,
Table,
Tag,
@@ -16,6 +15,7 @@ import {
Col,
TreeSelect,
} from "antd";
import { Editor } from "@tinymce/tinymce-react";
import type { ColumnsType } from "antd/es/table";
import {
SyncOutlined,
@@ -59,7 +59,18 @@ interface TableDataType {
key?: number;
total?: number;
}
interface dataType {
senders: string[];
cluster?: string | null;
createBy?: string | null;
contentType?: string | null;
noticeContent: string;
noticeId?: number | null;
noticeTitle?: string | null;
noticeType?: string | null;
sendType?: string | null;
state?: string | null;
}
//当前选择的角色信息
interface queryParamsType {
cluster?: string;
@@ -73,6 +84,32 @@ interface queryParamsType {
}
let thisrole: any = {};
export default function Inform() {
const editorInit = {
// selector:'textarea',
min_width: 600,
min_height: 500,
language: "zh_CN",
plugins:
"print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
toolbar:
["code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link | anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs"],
importcss_append: true,
//自定义文件选择器的回调内容
// file_picker_callback: function (callback, value, meta) {
// if (meta.filetype === 'file') {
// callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
// }
// if (meta.filetype === 'image') {
// callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
// }
// if (meta.filetype === 'media') {
// callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
// }
// }
};
const { confirm } = Modal;
//提示组件
const [messageApi, contextHolder] = message.useMessage();
@@ -86,7 +123,12 @@ export default function Inform() {
endTime: undefined,
});
const [thisNotice,setThisNotice]=useState<any>({})
const [thisNotice, setThisNotice] = useState<dataType>({
noticeContent: "",
senders: [],
});
const [allDisplay,setAllDisplay]=useState('block')
//Modal
const [isModalOpen, setIsModalOpen] = useState(false);
const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
@@ -103,6 +145,7 @@ export default function Inform() {
//发送对象数据
const [senderIds, setSenderIds] = useState<any>(undefined);
const [editorValue,setEditorValue]=useState('')
//表格数据总条数
let [total, setTotal] = useState<number>(0);
//表格格式
@@ -197,15 +240,27 @@ export default function Inform() {
console.log(value);
if (value === "user") {
getUserList();
setAllDisplay('block')
} else if (value === "role") {
getRolesList();
setAllDisplay('block')
} else if (value === "dept") {
getDeptsList();
setAllDisplay('block')
}
else {
setAllDisplay('none')
}
};
const onEditorChange=(Value:string)=>{
setEditorValue(Value)
}
// let thisrole: any = {roleId:'s'};
const handleDetail = (text:any) => {
getData(text.noticeId)
const handleDetail = (text: any) => {
getData(text.noticeId);
// console.log(thisNotice.);
setIsDetailModalOpen(true);
};
const handleDelete = (text: any) => {
@@ -240,14 +295,14 @@ export default function Inform() {
};
const handleSerach = () => {
searchValue = formSearch.getFieldsValue();
setSearchValue(searchValue)
setSearchValue(searchValue);
count = 1;
setQueryTableDataParams({ ...searchValue });
};
const handleReset = () => {
formSearch.resetFields();
searchValue = formSearch.getFieldsValue();
setSearchValue(searchValue)
setSearchValue(searchValue);
setQueryTableDataParams({ ...searchValue });
};
//Modal区域
@@ -256,9 +311,11 @@ export default function Inform() {
.validateFields()
.then((values) => {
// form.resetFields();
console.log("add", values);
if (modalTitle == "新增公告") {
postAdd({ ...values, cluster: "notice", action: "SEND" });
if(values.sendType==='all') values.senderIds=['0']
console.log(values);
postAdd({ ...values, cluster: "notice", action: "SEND" ,noticeContent:editorValue});
}
})
.catch((info) => {
@@ -283,6 +340,8 @@ export default function Inform() {
senderIds: undefined,
contentType: "html",
});
setAllDisplay('block');
setEditorValue('')
setIsModalOpen(true);
};
const filterOption = (
@@ -328,17 +387,16 @@ export default function Inform() {
}
} catch (error) {}
};
const getData =async(noticeId:number)=>{
const getData = async (noticeId: number) => {
try {
const {data,code}=await getDataAPI(noticeId);
if(code===1000){
setThisNotice({...data})
const { data, code } = await getDataAPI(noticeId);
if (code === 1000) {
setThisNotice({ ...data });
}
} catch (error) {
console.log(error);
}
}
};
const getTree = function (tree: any) {
tree.title = tree.deptName;
tree.value = tree.deptId;
@@ -390,7 +448,6 @@ export default function Inform() {
}
console.log(data);
setSenderIds([...data]);
// setTotal(data.total);
}
} catch (err: any) {
console.log("555", err);
@@ -415,6 +472,7 @@ export default function Inform() {
console.log("555", err);
}
};
useEffect(() => {
// setQueryParams({...queryParams,...valueSch})
queryTableDataParams = {
@@ -626,8 +684,8 @@ export default function Inform() {
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
<Col span={12}>{
allDisplay==='block'?<Form.Item
name="senderIds"
label="发送对象"
rules={[{ required: true, message: "选择发送对象" }]}
@@ -665,26 +723,40 @@ export default function Inform() {
/>
)}
</Form.Item>
:null
}
</Col>
</Row>
<Row>
<Form.Item
name="contentType"
label="内容类型"
rules={[{ required: true, message: "选择发送类型" }]}
>
<Radio.Group>
<Radio defaultChecked={true} value="html">
富文本
</Radio>
<Radio value="text">文本</Radio>
</Radio.Group>
</Form.Item>
</Row>
<Form.Item
name="contentType"
label="内容类型"
rules={[{ required: true, message: "选择发送类型" }]}
>
<Radio.Group>
<Radio defaultChecked={true} value="html">
富文本
</Radio>
<Radio value="text">文本</Radio>
</Radio.Group>
<Form.Item name="noticeContent" label="公告内容">
<Row>
<div style={{width:'800px'}}>
<Editor
apiKey="v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg"
initialValue=""
init={editorInit}
// value={editorValue}
onEditorChange={(Value)=>onEditorChange(Value)}
></Editor>
</div>
</Row>
</Form.Item>
<Form.Item
name="menuIds"
label="菜单权限"
className="collection-create-form_last-form-item"
></Form.Item>
</Form>
</Modal>
<Modal
@@ -704,57 +776,67 @@ export default function Inform() {
>
<Row>
<Col span={8}>
<Form.Item
name='noticeTitle'
label='公告标题'
// initialValue={'ssss'}
<Form.Item
name="noticeTitle"
label="公告标题"
// initialValue={'ssss'}
>
<span> {thisNotice.noticeTitle}</span>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
name='sendType'
label='发送类型'
// initialValue={'ssss'}
<Form.Item
name="sendType"
label="发送类型"
// initialValue={'ssss'}
>
<span> {thisNotice.sendType==='user'?'用户':thisNotice.sendType==='role'?'角色':
thisNotice.sendType==='dept'?'部门':'全发'}</span>
<span>
{" "}
{thisNotice.sendType === "user"
? "用户"
: thisNotice.sendType === "role"
? "角色"
: thisNotice.sendType === "dept"
? "部门"
: "全发"}
</span>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
name='sendIds'
label='发送对象'
>
<span></span>
<Form.Item name="sendIds" label="发送对象">
<span>{thisNotice.senders.join("，")}</span>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={8}>
<Form.Item
name='noticeType'
label='公告类型'
>
<span>{thisNotice.noticeType==='1'?<Tag color="processing">通知</Tag>:<Tag color="processing">公告</Tag>}</span>
<Form.Item name="noticeType" label="公告类型">
<span>
{thisNotice.noticeType === "1" ? (
<Tag color="processing">通知</Tag>
) : (
<Tag color="processing">公告</Tag>
)}
</span>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
name='contentType'
label='内容类型'
>
<span>{thisNotice.contentType==='html'?<Tag color="success">富文本</Tag>:<Tag>文本</Tag>}</span>
<Form.Item name="contentType" label="内容类型">
<span>
{thisNotice.contentType === "html" ? (
<Tag color="success">富文本</Tag>
) : (
<Tag>文本</Tag>
)}
</span>
</Form.Item>
</Col>
</Row>
<Row>
<Form.Item
name='noticeContent'
label='公告内容'
>
<span dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}></span>
<Form.Item name="noticeContent" label="公告内容">
<span
dangerouslySetInnerHTML={{ __html: thisNotice.noticeContent }}
></span>
</Form.Item>
</Row>
</Form>