我需要为不同的字段提供大约 6 个文本编辑器,以便用户可以将文本修改为粗体、斜体、下划线,向其中添加图像。我需要将数据作为纯 HTML 发送到 db 并以相同的方式接收数据格式。我正在使用 react-draft-wysiwyg,用于转换 Draft-js-html。请帮帮我
import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import { EditorState, convertToRaw} from 'draft-js';
class Aboutus extends Component {
constructor(props) {
super(props);
this.state = {
editorStateLabel1: EditorState.createEmpty(),
editorStateLabel2: EditorState.createEmpty(),
aboutus:'',
inProgress: false,
uploadedImages:[],
};
this.onEditorStateChange = this.onEditorStateChange.bind(this);
this.uploadCallback = this.uploadCallback.bind(this);
}
uploadCallback(file){
let uploadedImages = this.state.uploadedImages
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
}
uploadedImages.push(imageObject);
this.setState(uploadedImages:uploadedImages)
return new Promise(
(resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
}
);
}
onEditorStateChange(type, editorState) {
var aboutus = {};
aboutus[type] =
draftToHtml(convertToRaw(editorState.getCurrentContent()))
this.setState({
aboutus
});
}
render() {
return (
<div>
<h4>label-1</h4>
<Editor
toolbar={{ image: { uploadCallback: this.uploadCallback
}}}
editorState={this.state.aboutus.editorStateLabel1}
onEditorStateChange={this.onEditorStateChange.bind(this,
'editorStateLabel1')}
/>
</Col>
</Row>
<Row>
<Col md={18}>
<h4>label-2</h4>
<Editor
toolbar={{ image: { uploadCallback: this.uploadCallback
}}}
editorState={this.state.aboutus.editorStateLabel2}
onEditorStateChange={this.onEditorStateChange.bind(this,
'editorStateLabel2')}
/>
</Col>
</Row>
</div>
);
}
}
export default Aboutus;
我收到类似 Uncaught Type Error: editorState.getImmutable is not a function 的错误