如何将图像保存在ReactJ中的Draftwysiwyg中
我为我的React项目使用Wysiwyg
草案。
但是我只能得到简单的文字,但是我无法获得并保存图像。
如何使用wysiwyg
在服务器上保存文本和图像?
组件文本编辑器:
class TextEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
uploadedImages: [],
};
this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
}
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
_uploadImageCallBack(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 } });
});
}
render() {
const { editorState } = this.state;
return (
<div style={{ height: "100%", width: "100%" }}>
<Editor
editorState={editorState}
toolbarClassName='toolbarClassName'
wrapperClassName='wrapperClassName'
editorClassName='editorClassName'
onEditorStateChange={this.onEditorStateChange}
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: { uploadCallback: this._uploadImageCallBack },
inputAccept:
"application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel",
}}
/>
</div>
);
}
}
export default TextEditor;
我使用texteditor
component,这是另一个组件中的类组件,即功能组件,然后从那里将数据发送到服务器。
感谢那些帮助我!
I use the Draft wysiwyg
for my React project .
But I can only get simple text, but I can not get and save the image.
How can I save both text and image on my server using Draft wysiwyg
?
component text editor:
class TextEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
uploadedImages: [],
};
this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
}
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
_uploadImageCallBack(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 } });
});
}
render() {
const { editorState } = this.state;
return (
<div style={{ height: "100%", width: "100%" }}>
<Editor
editorState={editorState}
toolbarClassName='toolbarClassName'
wrapperClassName='wrapperClassName'
editorClassName='editorClassName'
onEditorStateChange={this.onEditorStateChange}
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: { uploadCallback: this._uploadImageCallBack },
inputAccept:
"application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel",
}}
/>
</div>
);
}
}
export default TextEditor;
I use the TextEditor
component, which is a class component, in another component, which is the functional component, and from there I send the data to the server.
thank for those to help me!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论