react react-draft-wysiwyg使用
<div class="cnblogs_Highlighter"><pre class="brush:html;gutter:true;">import * as Reactfrom 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import {ContentState, EditorState, convertToRaw } from 'draft-js'
import htmlToDraft from 'html-to-draftjs'
import draftToHtml from 'draftjs-to-html'
import E from 'wangeditor'
import iframeIp from '@config/index'
import './index.less'
import bgImg from '../../assets/images/index/home_bg.png'
import HttpClient from '@utils/HttpClient'
import wordIp from '@utils/wordDowload'
const { Header, Sider, Content } = Layout
// const { TextArea } = Input
const confirm = Modal.confirm
// const FormItem = Form.Item
export interface IProps extends FormComponentProps {
form: any
}
interface IState {
currentPage: any
pageSize: any
total:any
reportList: any
width: any
collapsed: any
Ind: any
noticeContent: any
isShowNotice: any
uploadFileLists: any
editorState: any // 富文本编辑区
noticeFileList: any
firstDetailId: any
flagFirst: any
isCurrent: any
editorContent: any
}
class MonthReport extends React.Component<IProps, IState> {
iframe: any
editorElem: any
constructor(props: IProps) {
super(props)
const sampleMarkup = `` // 通知内容
const blocksFromHTML = htmlToDraft(sampleMarkup)
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap
)
const index = Number(wordIp.getQueryString(window.location.hash, 'index'))
const id = wordIp.getQueryString(window.location.hash, 'id')
this.state = {
editorState: EditorState.createWithContent(state),
editorContent: '好好学习天天向上',
currentPage: 1,
pageSize: 20,
total: 0,
reportList: [],
noticeFileList: [],
width: 360,
collapsed: 'block',
Ind: index,
noticeContent: '#',
isShowNotice: true,
uploadFileLists: [],
firstDetailId: '0',
flagFirst: false,
isCurrent: id
}
this.editorElem = React.createRef()
}
componentWillMount() {
const id = wordIp.getQueryString(window.location.hash, 'id')
if (id) {
// console.log(id, index)
this.getDetailContent(id)
}
const elem = this.editorElem
const editor = new E(elem)
// 使用 onchange 函数监听内容的变化，并实时更新到 state 中
editor.customConfig.uploadImgMaxLength = 1
// 限制图片大小
editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.onchange = html => {
this.setState({
editorContent: html
})
}
editor.create()
}
changePage = (currentPage) => {
//console.log(currentPage)
this.setState({
currentPage
})
const { pageSize } = this.state
const params = {
pageNum: currentPage,
pageSize,
//picturecode
}
this.getMonthNoticeData(params)
}
componentDidMount() {
const params = {
pageNum: 1,
pageSize: 20
}
this.getMonthNoticeData(params)
}
onDelBulletin = (id) => {
// 修改月报审核状态
confirm({
title: '确定要删除该公告吗？',
content: '',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
// const param = {
// noticeId: id,
// }
HttpClient.delete(`/api/notice/${id}`, {}).then((res: any) => {
// console.log(res)
if (res) {
message.success('删除成功')
const { currentPage, pageSize, isCurrent } = this.state
const params = {
pageNum: currentPage,
pageSize,
}
this.getMonthNoticeData(params)
if (isCurrent === id) {
this.setState({
flagFirst: true
})
}
} else {
message.success('删除失败')
}
})
}
})
}
getMonthNoticeData = (params) => {
HttpClient.get(`/api/notice`, params).then((res: any) => {
if (res.code === '0000') {
if (res.data.records.length === 0) {
return
}
this.setState({
reportList: res.data.records,
firstDetailId: res.data.records.noticeId,
total: res.data.total
}, () => {
const { firstDetailId, flagFirst } = this.state
if (flagFirst) {
this.setState({
Ind: 0
})
this.getDetailContent(firstDetailId)
}
})
}
})
}
//
// 获取详情内容
getDetailContent = (id) => {
// const param = {
// noticeId: id
// }
HttpClient.get(`/api/notice/${id}`, {}).then((res: any) => {
if (res.code === '0000') {
let data = res.data
if (!data) return
data.noticeFileList.map(file => {
file.uid = file.id
file.name = file.fileName
file.url =`${iframeIp.iframeIp}/${file.filePath}`
})
this.setState({
// noticeContent: res.data.noticeContent,
noticeContent: `${iframeIp.iframeIp}/${res.data.noticeContent}`,
noticeFileList: data.noticeFileList,
flagFirst: false,
isCurrent: id
})
}
})
}
// 点击侧边栏列表
getDetail = (id, index) => {
this.setState({
Ind: index,
isShowNotice: true
}, () => {
this.getDetailContent(id)
})
}
onShowSizeChange = (currentPage, pageSize) => {
this.setState({
currentPage,
pageSize
})
const params = {
pageNum: currentPage,
pageSize,
//picturecode
}
this.getMonthNoticeData(params)
}
toggleWidth = () => {
const {width } = this.state
if (width === 30) {
this.setState({
width: 360,
collapsed: 'block'
})
} else {
this.setState({
width: 30,
collapsed: 'none'
})
}
}
// 清空富文本的值
clearContent = () => this.setState({ editorState: EditorState.createEmpty() })
goAddMode = () => {
this.setState({
isShowNotice: false,
flagFirst: false,
uploadFileLists: []
})
this.props.form.getFieldsValue()
this.clearContent()
}
beforeUpload = (file) => {
console.log(file)
this.setState(state => ({
uploadFileLists: [...state.uploadFileLists, file],
}))
return false
}
onRemove = file => {
this.setState((state) => {
const index = state.uploadFileLists.indexOf(file)
const newFileList = state.uploadFileLists.slice()
newFileList.splice(index, 1)
return {
uploadFileLists: newFileList,
}
})
}
addNotice = () => {
this.props.form.validateFields((err, values) => {
if (err) {
return
}
const modalContent = draftToHtml(convertToRaw((this.state.editorState.getCurrentContent())))
const formData = new FormData()
if (this.state.uploadFileLists.length) {
this.state.uploadFileLists.map((item) => {
formData.append('uploadFile', item)
})
}
formData.append('title', values.title)
formData.append('noticeContent',modalContent)
HttpClient.post('/api/notice', formData).then((res: any) => {
if (res) {
message.success('新增成功')
this.setState({
isShowNotice: true,
flagFirst: true
})
const { currentPage, pageSize } = this.state
const params = {
pageNum: currentPage,
pageSize,
}
this.getMonthNoticeData(params)
} else {
message.success('新增失败')
}
})
})
}
// 富文本值改变
onEditorStateChange = (editorState) => {
this.setState({
editorState
})
}
// 文件上传
uploadImageCallBack1 = (file) => {
return new Promise((resolve, reject) => {
console.info(reject, resolve)
const formData = new FormData()
formData.append('uploadFile', file, file.name)
// reqwest({
// url: 'api/fileController/uploadFile',
// method: 'post',
// headers: { 'Authorization': `Bearer${sessionStorage.getItem('token')}` },
// processData: false,
// data: formData,
// success: (res) => {
// if (res.code === 'CODE_0000') {
// const imgurl = res.data.idFileName
// const imgObj = {
// data: {
// link:getImgPath () + imgurl
// }
// }
// resolve(imgObj)
// }
// },
// error: () => {
// this.setState({
// })
// message.error('数据保存失败')
// },
// })
}
)
}
render() {
const { pageSize, currentPage, total, reportList,width, collapsed,
Ind, noticeContent, isShowNotice, uploadFileLists, editorState, noticeFileList } = this.state
const formItemLayout = {
labelCol: { span: 1 },
wrapperCol: { span: 23 },
}
const { getFieldDecorator } = this.props.form
const hasFile = noticeFileList && noticeFileList.length > 0
return (
<div className='MonthReport'>
<img className='bgImg' src={bgImg} />
<Layout className='MonthReportCon'>
<Header className='MonthReportHead'>
<span>系统公告</span>
<Button className='add-notice' onClick={this.goAddMode}>新增公告</Button>
</Header>
<Layout className='MonthReportSec'>
<Sider width={width} className='MonthReportSider'>
<div className='toggleWidthBox'>
{
collapsed === 'block' ? <Icon onClick={this.toggleWidth} className='toggleWidth' type='left-circle' />
: <Icon onClick={this.toggleWidth} className='toggleWidth' type='left-circle' />
}
</div>
<div style={{display: collapsed, height: '100%'}}>
<div className='briefing-content-box'>
<ul className='briefing-content-list'>
{
reportList.map((item, index) => {
return (
<li title={item.title} className={Ind === index ? 'active' : ''} onClick={() => this.getDetail(item.noticeId, index)}key={index}>
<div className='left'>
{item.title}
</div>
<Icon onClick={() => this.onDelBulletin(item.noticeId)} title='删除' type='delete' className='delete-icon'/>
</li>
)
})
}
</ul>
<div className='toggle-page'>
<Pagination
size='small'
pageSize={pageSize}
current={currentPage}
total={total}
showTotal={num => `共 ${num} 条数据`}
onChange={this.changePage}
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
/>
</div>
</div>
</div>
</Sider>
<Content className='MonthReportContent'>
{
isShowNotice ?
<div className='MonthReportContent-right'>
<h4>公告内容</h4>
<div className='detail-con'>
<iframe id='notice' src={noticeContent}></iframe>
</div>
{
hasFile &&
<div className='file-down'>
<p className='title-label'>附件下载</p>
<Upload fileList={noticeFileList} showUploadList={{showRemoveIcon: false}} />
</div>
}
</div> :
<div className='MonthReportContent-right'>
<Form className='create-project-form' {...formItemLayout}>
<Form.Item label='标题'>
{getFieldDecorator('title', {
rules: [
{ required: true, message: '请输入公告标题' },
{ max: 100, message: '不能超过100个字符' }
],
})(
<Input allowClear placeholder='请输入公告标题' />
)}
</Form.Item>
<Form.Item className='ant-form-item-required' label='内容'>
{getFieldDecorator('noticeContent', {
rules: [{ required: true, message: '请输入公告内容' }],
})(
<Editor
wrapperClassName='demo-wrapper'
editorClassName='demo-editor'
editorState={editorState}
onEditorStateChange={this.onEditorStateChange}
placeholder='请输入公告内容'
name ='nr'
localization={{locale: 'zh'}}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded','image', 'remove', 'history'],
image: {urlEnabled: true,
uploadEnabled: true,
alignmentEnabled: true, // 是否显示排列按钮 相当于text-align
uploadCallback: this.uploadImageCallBack1,previewImage: true,
inputAccept: 'image/*',
alt: {present: false, mandatory: false} },
}}
/>
// <TextArea autosize={{ minRows: 14, maxRows: 40 }} placeholder='请输入公告内容' />
)}
</Form.Item>
<Form.Item label='附件'>
{getFieldDecorator('uploadFile', {
})(
<Upload
name='file'
fileList={uploadFileLists}
beforeUpload={this.beforeUpload}
onRemove={this.onRemove}
accept='.pdf,.doc,.docx'
>
<Button>
<Icon type='upload' /> 上传附件
</Button>
</Upload>
)}
</Form.Item>
<Form.Item className='summit-btn'>
<Button type='primary' onClick={this.addNotice}>发布</Button>
</Form.Item>
</Form>
</div>
}
</Content>
</Layout>
</Layout>
</div>
)
}
}
export default Form.create<IProps>()(MonthReport)
</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/whlBooK/p/11858191.html
頁:
[1]