react中使用富文本编辑器wangeditor
在开发react开发过程中在做一些表单内容提交修改过程中：用到了上传和下载附件；富文本编辑等，话不多说上代码：
index.js文件是一个list表格：
/*
* 项目需求列表
*/
import React, { Component } from "react";
import Storage from "store2";
// import History from "@utils/history";
import { Modal, Button, Row, Col, Table, Notification } from "antd";
import Request from "@utils/request";
import { areaName, bankName } from "@utils/codeToName";
import Form from "./form.js";
let version = Storage.get("version");
const columns = _this => [
{
title: "id",
dataIndex: "id",
},
{
title: "需求名称",
dataIndex: "demandName",
},
{
title: "需求编码",
dataIndex: "demandCode",
},
{
title: "需求描述",
dataIndex: "note",
width: 200,
render: text => {
const re = new RegExp("<[^<>]+>", "g");
const text1 = text.replace(re, "");
return ;
}
},
{
title: "地区",
dataIndex: "areaCode",
align: "center",
render: (text) => areaName(text)
},
{
title: "银行",
dataIndex: "bankCode",
align: "center",
render: (text) => bankName(text)
},
{
title: "创建时间",
dataIndex: "createTime",
width: 200,
},
{
title: "操作",
dataIndex: "操作",
fixed: "right",
align: "center",
width: 240,
render: (text, record) => (
{
record.loginname !== "admin"
&&
}
)
}
];
class View extends Component {
constructor(props) {
super(props);
this.state = {
tableSource: [],
taskModal: false,
downloadtaskModal: false,
taskModalType: "add", //创建：add 修改：edit
demandInfo: "",
downloadDemandInfo: [] //附件信息
};
}
componentDidMount() {
this.loadData(); // 获取数据
}
// 渲染页面数据
loadData = async () => {
// 获取任务列表
Request.GET("/api/demand/list", {
params: {
loginKey: Storage.get("Authorization"),
}
}).then((res) => {
if (res.success) {
this.setState({
tableSource: res.data
});
} else {
Notification.warning({
message: res.msg || "获取户失败",
});
}
});
};
CancelTaskModal = () => {
this.setState({
taskModal: false
})
}
CanceldownloadtaskModal = () => {
this.setState({
downloadtaskModal: false
})
}
render() {
const {
tableSource,
taskModalType,
demandInfo,
downloadtaskModal,
downloadDemandInfo
} = this.state;
console.log(downloadDemandInfo)
return (
{ this.CancelTaskModal() }}
>
{ this.CanceldownloadtaskModal() }}
>
{
(downloadDemandInfo && downloadDemandInfo.length > 0)
?
downloadDemandInfo.map(item => {
return
})
:
"无附件"
}
);
}
}
export default View;
form.js表单新增，修改
/*
* 创建修改需求
*/
import React from "react";
import { Form, Notification, Button, Input, Row, Col, Select, Radio, message, Upload, Icon } from "antd";
import Request from "@utils/request";
import Storage from "store2";
import Edit from "./edit"
const FormItem = Form.Item;
class ViewForm extends React.Component {
constructor(props) {
super(props);
this.state = {
demandInfo: {},
areaArr: [],
bankArr: [],
editorContent: "",
fileList: [],//要上传的附件list
zzfileList: [], //回显的附件list
};
}
componentDidMount() {
this.areaData();
this.bankData();
const { taskModalType } = this.props;
if (taskModalType === "edit") {
this.loadData(); // 获取数据
}
}
// 获取地区
areaData = () => {
Request.GET("/api/area/list", {
params: {
loginKey: Storage.get("Authorization"),
}
}).then(res => {
if (res.success) {
this.setState({
areaArr: res.data
});
}
})
};
// 获取银行
bankData = () => {
Request.GET("/api/bank/list", {
params: {
loginKey: Storage.get("Authorization"),
}
}).then(res => {
if (res.success) {
this.setState({
bankArr: res.data
});
}
})
};
// 根据地区换银行
changeArea = (value) => {
let areaCode = value;
Request.GET(`/api/area/getByAreaCode/${areaCode}`, {
params: {
loginKey: Storage.get("Authorization"),
}
}).then(res => {
if (res.success) {
this.setState({
bankArr: res.data.bankList
});
} else {
this.setState({
bankArr: []
});
}
})
};
// 编辑器内容
saveEditor = (text) => {
const { form: { setFieldsValue } } = this.props;
this.setState({
editorContent: text
});
setFieldsValue({
"note": text
});
};
// 获取项目信息
loadData = async () => {
Request.GET(`/api/demand/get/${this.props.demandInfo}`, {
params: {
loginKey: Storage.get("Authorization"),
}
}).then((res) => {
if (res.success) {
this.setState({
demandInfo: res.data,
editorContent: res.data.note,
zzfileList: res.data.attachmentList, // 原始数据
fileList: (this.props.taskModalType === "edit" && res.data.attachmentList && res.data.attachmentList.length > 0)
?
res.data.attachmentList.map(f => {
const temp = {
// 为了提供给上传组件回显
id: f.id,
uid: f.uuid, // 这是上传组件规定的文件唯一标识，内部会提供给Form以便正常渲染回显列表
name: f.fileName,
status: "done",
url: "",
fileExt: f.fileExt,
filePath: f.filePath,
fileSize: f.fileSize,
}
return temp;
})
:
[]
});
} else {
Notification.warning({
message: res.msg || "获取项目信息失败",
});
}
});
};
handleSubmit = () => {
const { form: { validateFields }, taskModalType } = this.props;
const { demandInfo, zzfileList, editorContent } = this.state;
validateFields((err, values) => {
if (!err) {
if (taskModalType === "edit") {
Request.POST("/api/demand/update", {
params: {
loginKey: Storage.get("Authorization"),
},
body: {
demandName: values.demandName,
demandCode: values.demandCode,
id: demandInfo.id,
areaCode: values.areaCode,
bankCode: values.bankCode,
demandGeneral: values.demandGeneral,
attachmentList: zzfileList,
note: editorContent,
}
}).then((res) => {
if (res.success) {
Notification.success({
message: res.msg || "修改成功",
});
this.props.parentThis.CancelTaskModal();
this.props.parentThis.loadData();
} else {
Notification.warning({
message: res.msg || "修改失败",
});
}
});
} else {
Request.POST("/api/demand/add", {
params: {
loginKey: Storage.get("Authorization"),
},
body: {
demandName: values.demandName,
areaCode: values.areaCode,
demandCode: values.demandCode,
bankCode: values.bankCode,
demandGeneral: values.demandGeneral,
attachmentList: zzfileList,
note: editorContent,
}
}).then((res) => {
if (res.success) {
Notification.success({
message: res.msg || "新增需求成功",
});
this.props.parentThis.CancelTaskModal();
this.props.parentThis.loadData();
} else {
Notification.warning({
message: res.msg || "新增需求失败",
});
}
});
}
}
});
};
render() {
const { demandInfo, fileList, zzfileList, editorContent, areaArr, bankArr } = this.state;
const { taskModalType } = this.props;
if (taskModalType === "edit" && Object.keys(demandInfo).length === 0) return ;
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 12 },
};
const formItemLayoutNote = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
}
let _this = this;
const props = {
accept: ".rar,.zip,.doc,.docx,.xlsx,.xls,.pdf,.jpg,.png",
name: "file",
action: `${Storage.get("version")}/attachment/upload?loginKey=${Storage.get("Authorization")}`,
defaultFileList: fileList,
beforeUpload(file) {
const isLt10M = file.size / 1024 / 1024 <= 100;
if (!isLt10M) {
message.error("文件大小限制在100M以下！");
this.onRemove(file);
return false;
}
},
onRemove(file) {
Request.GET(`/api/attachment/del/${file.uid}`, {
params: {
loginKey: Storage.get("Authorization"),
}
}).then((res) => {
if (res.success) {
Notification.success({
message: res.msg || "删除附件成功",
});
} else {
Notification.warning({
message: res.msg || "删除附件失败",
});
}
});
_this.setState({
fileList: fileList.filter(item => item.name !== file.name),
zzfileList: zzfileList.filter(item => item.fileName !== file.name),
}, () => {
_this.props.form.setFieldsValue({ fileList: fileList });
});
},
onChange(info) { // 上传中、完成、失败都会调用这个函数
let curFileList = [...info.fileList];
curFileList = curFileList.map((file) => {
if (file.response) {
console.log(file.response);
// 这里上传组件回调的数据，有些是提供给上传组件自身使用的，所以不能不要
// 而需要向后端提交的数据这里提前封装起来，以方便最终的提交
// let saveParams = {};
file["fileName"] = file.response.data.fileName;
file["filePath"] = file.response.data.filePath;
file["fileSize"] = file.response.data.fileSize;
file["fileExt"] = file.response.data.fileExt;
file["uuid"] = file.response.data.uuid;
file["id"] = file.response.data.id;
}
return file;
});
curFileList = curFileList.filter(file => {
if (file.size / 1024 / 1024 <= 100) {
if (file.response) {
return file.response.code === 0;
}
return true;
} else {
return false;
}
});
_this.setState({
zzfileList: [
..._this.state.zzfileList,
...curFileList
]
});
},
// fileList: fileList, // 上传组件已使用Form进行代理，所以不要再直接设置
};
return (
);
}
}
const View = Form.create()(ViewForm);
export default View;
edit.js表单中的富文本编辑器
import React, { Component } from "react";
import E from "wangeditor"
class Wangeditor extends Component {
constructor(props, context) {
super(props, context);
this.myRefOne = React.createRef();
this.state = {
editorContent: ""
}
}
componentDidMount() {
const elem = this.myRefOne;
this.editor = new E(elem);
// 使用 onchange 函数监听内容的变化，并实时更新到 state 中
this.editor.customConfig.onchange = html => {
this.setState({
editorContent: html
});
// let wordText = this.editor.txt.text();
this.props.parentThis.saveEditor(html);
}
this.editor.create();
this.editor.txt.html(this.state.editorContent);
}
// 注意此处有个需要注意的坑，在回显过程中，需要对比props修改的传值问题
shouldComponentUpdate(nextProps) {
if (this.state.editorContent !== nextProps.value) {
this.setState({
editorContent: nextProps.value
}, () => {
this.editor.txt.html(this.state.editorContent);
});
return true;
} else {
return false;
}
}
render() {
// const { getFieldDecorator, value: { note }, parentThis } = this.props;
return (
{/* 将生成编辑器 */}
this.myRefOne = ref}
style={{
textAlign: "left"
}}
>
);
}
}
export default Wangeditor;