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/DocumentDetailPage/index.jsx | 12 ----
package.json | 1
src/components/page/DocumentEditPage/index.jsx | 80 ++++++++++----------------
src/api/httpurl.js | 4
src/utils/utils.js | 7 ++
src/components/page/DocumentEditPage/index.scss | 17 +++++
6 files changed, 56 insertions(+), 65 deletions(-)
diff --git a/package.json b/package.json
index 1e2fde8..fe59ca1 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@testing-library/user-event": "^7.1.2",
"antd": "^3.26.11",
"axios": "^0.19.2",
+ "braft-editor": "^2.3.9",
"mocker-api": "^1.9.0",
"node-sass": "^4.13.1",
"react": "^16.12.0",
diff --git a/src/api/httpurl.js b/src/api/httpurl.js
index 67afc99..bbd512e 100644
--- a/src/api/httpurl.js
+++ b/src/api/httpurl.js
@@ -1,6 +1,6 @@
//内网测试地址
-let StagingUrl = 'http://192.168.0.105:9072';
-// let StagingUrl = "http://120.79.193.119:9072";
+// let StagingUrl = 'http://192.168.0.105:9072';
+let StagingUrl = "http://120.79.193.119:9072";
//mock地址
diff --git a/src/components/page/DocumentDetailPage/index.jsx b/src/components/page/DocumentDetailPage/index.jsx
index d0e1fd2..3ae3663 100644
--- a/src/components/page/DocumentDetailPage/index.jsx
+++ b/src/components/page/DocumentDetailPage/index.jsx
@@ -220,18 +220,6 @@
<Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
<Icon type="upload" />上传文件</Button>
</Upload>
- <Upload {...props} >
- <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
- <Icon type="upload" />上传文件</Button>
- </Upload>
- <Upload {...props} >
- <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
- <Icon type="upload" />上传文件</Button>
- </Upload>
- <Upload {...props} >
- <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
- <Icon type="upload" />上传文件</Button>
- </Upload>
</div> : '未上传附件'
}
</Col>
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">
diff --git a/src/components/page/DocumentEditPage/index.scss b/src/components/page/DocumentEditPage/index.scss
index 6da7682..dfc3b41 100644
--- a/src/components/page/DocumentEditPage/index.scss
+++ b/src/components/page/DocumentEditPage/index.scss
@@ -26,8 +26,23 @@
& .ant-upload-list-item-name {
cursor: pointer;
}
- & .w-e-text p, .w-e-text h1, .w-e-text h2, .w-e-text h3, .w-e-text h4, .w-e-text h5, .w-e-text table, .w-e-text pre{
+ & .w-e-text p,
+ .w-e-text h1,
+ .w-e-text h2,
+ .w-e-text h3,
+ .w-e-text h4,
+ .w-e-text h5,
+ .w-e-text table,
+ .w-e-text pre {
margin: 1px 0;
}
+ & .BraftEditor-style {
+ border: 1px solid #d9d9d9;
+ border-radius: 5px 5px 0 0;
+ }
+ & .bf-content{
+ min-height: 500px;
+ height: auto;
+ }
}
}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index e3d62fd..50c17c8 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -8,4 +8,9 @@
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
const id = s.join('');
return id;
-}
\ No newline at end of file
+}
+
+// 去除富文本的特殊标签符号
+export function emoveTAG(str) {
+ return str.replace(/<[^>]+>/g, '');
+}
--
Gitblit v1.8.0