From 8d69f8151ef345d37dbf41e05f4a5a8082513710 Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 29 Apr 2020 10:51:42 +0800
Subject: [PATCH] 引用braft-editor富文本
---
src/components/page/DocumentEditPage/index.jsx | 80 +++++++++++++++------------------------
1 files changed, 31 insertions(+), 49 deletions(-)
diff --git a/src/components/page/DocumentEditPage/index.jsx b/src/components/page/DocumentEditPage/index.jsx
index 8e58a85..65f4acf 100644
--- a/src/components/page/DocumentEditPage/index.jsx
+++ b/src/components/page/DocumentEditPage/index.jsx
@@ -7,13 +7,15 @@
/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Card, Row, Col, Select, Button, Input, Upload, Icon, Spin, message } from 'antd';
-import E from 'wangeditor';
-import './index.scss';
+import BraftEditor from 'braft-editor'
const Option = Select.Option;
const { TextArea } = Input;
+import './index.scss';
+import 'braft-editor/dist/index.css'
import fetch from '../../../api/request';
-import { BASE_URL } from '../../../api/httpurl'
+import { BASE_URL } from '../../../api/httpurl';
+import { emoveTAG } from '../../../utils/utils';
const param = [{ value: 'DT00002', name: '通知公告' }, { value: 'DT00001', name: '规章制度' }]
export default class DocumentEditPage extends Component {
@@ -27,31 +29,17 @@
saveData: {},//表单提交数据
fileList: [],//附件列表
disabled: false,
- editorContent: null//富文本编辑内容
+ editorContent: '',//富文本编辑内容
+ editorState: BraftEditor.createEditorState(null)
};
}
componentWillMount() { }
componentDidMount() {
- this.initEditor();
this.loadData()
}
- initEditor = () => {
- const elem = this.refs.editorElem
- const editor = new E(elem);
- // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
- editor.customConfig.onchange = html => {
- this.setState({
- editorContent: html,
- })
- }
- editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
- editor.customConfig.showLinkImg = true; // 隐藏“网络图片”tab
- editor.create();
-
- }
loadData = () => {
const { id } = this.props.match.params;
console.log(this.props)
@@ -79,7 +67,6 @@
});
}
-
saveInputChange = ({ target: { value, name } }) => {
this.setState(({ saveData }) => ({
saveData: {
@@ -90,12 +77,13 @@
}
submit = () => {
- const { saveData, editorContent } = this.state;
+ let { saveData, editorContent } = this.state;
+ // editorContent = emoveTAG(editorContent);
console.log(saveData)
if (!saveData.documentTitle) {
return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
}
- if (!editorContent) {
+ if (!emoveTAG(editorContent)) {
return message.warning('通知内容不能为空');
}
let _this = this;
@@ -115,9 +103,8 @@
iconLoading: false,
});
message.success("提交成功！");
- this.props.history.push("/index/rules")
+ this.props.history.push(this.switchWordByType(saveData.documentType).href);
});
-
}
cancle = () => {
@@ -135,14 +122,21 @@
case 'DT00002':
return {
title: '通知',
- associateId: 1001
+ associateId: 1001,
+ href: '/index/workbench/announcement'
};
case 'DT00001':
return {
title: '规章制度',
- associateId: 1002
+ associateId: 1002,
+ href: '/index/rules'
}
}
+ }
+
+ handleChange = (editorState) => {
+ console.log(editorState, editorState.toHTML())
+ this.setState({ editorState, editorContent: editorState.toHTML() })
}
render() {
@@ -168,28 +162,15 @@
window.open(file.url);
},
showUploadList: { showPreviewIcon: true, showDownloadIcon: false, showRemoveIcon: disabled ? false : true }
- // onDownload: (file) => {
- // console.log(file)
- // Fetch.attachmentDownload(file.uid)
- // .then(res => {
- // message.success("下载成功！");
- // });
- // },
- // onRemove: (file) => {
- // Fetch.deleteAttachment(file.uid)
- // .then(res => {
- // message.success("移除成功！");
- // });
- // this.setState(({ fileList }) => {
- // const index = fileList.indexOf(file);
- // const newFileList = fileList.slice();
- // newFileList.splice(index, 1);
- // return {
- // fileList: newFileList,
- // };
- // });
- // }
};
+
+ const controls = ['undo', 'redo', 'separator',
+ 'headings', 'separator', 'font-size', 'line-height', 'letter-spacing', 'separator',
+ 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator', 'text-indent', 'text-align', 'separator',
+ 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
+ 'link', 'separator', 'hr', 'separator',
+ 'media', 'separator', 'remove-styles',
+ 'clear'];
return (
<div className="document-edit-page-main">
@@ -230,9 +211,10 @@
通知内容：
</Col>
</Row>
-
+ {/*
<div ref="editorElem" className="marginTB">
- </div>
+ </div> */}
+ <BraftEditor value={this.state.editorState} onChange={this.handleChange} controls={controls} className="marginTB BraftEditor-style" />
<Row gutter={16}>
<Col className="gutter-row marginTop">
--
Gitblit v1.8.0