在 Draft JS 中显示图像文件上传的问题
Issue in showing File Upload for image in Draft JS
我使用 draft-js 在 Web 应用程序中显示编辑器。但我在草稿编辑器中显示文件上传选项时遇到问题。
这是截图:
这是编辑器在他们的演示中的显示方式
您可以在此处查看演示 https://jpuri.github.io/react-draft-wysiwyg/#/
请检查下面的代码并提出解决方案:
import React, { Component } from 'react';
import logo from './logo.svg';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};
render() {
const { editorState } = this.state;
return (
<div className="App">
<header className="App-header">
<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 },
inputAccept: 'application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel'
}}
/>
</header>
</div>
);
}
}
export default App;
问题已解决。我忘记实现上传文件的回调函数了。这是工作代码:
import React, { Component } from 'react';
import logo from './logo.svg';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
uploadedImages: []
};
this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};
_uploadImageCallBack(file) {
// long story short, every time we upload an image, we
// need to save it to the state so we can get it's data
// later when we decide what to do with it.
// Make sure you have a uploadImages: [] as your default state
let uploadedImages = this.state.uploadedImages;
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
}
uploadedImages.push(imageObject);
this.setState({ uploadedImages: uploadedImages })
// We need to return a promise with the image src
// the img src we will use here will be what's needed
// to preview it in the browser. This will be different than what
// we will see in the index.md file we generate.
return new Promise(
(resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
}
);
}
render() {
const { editorState } = this.state;
return (
<div className="App">
<header className="App-header">
<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'
}}
/>
</header>
</div>
);
}
}
export default App;
我使用 draft-js 在 Web 应用程序中显示编辑器。但我在草稿编辑器中显示文件上传选项时遇到问题。
这是截图:
这是编辑器在他们的演示中的显示方式
您可以在此处查看演示 https://jpuri.github.io/react-draft-wysiwyg/#/
请检查下面的代码并提出解决方案:
import React, { Component } from 'react';
import logo from './logo.svg';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};
render() {
const { editorState } = this.state;
return (
<div className="App">
<header className="App-header">
<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 },
inputAccept: 'application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel'
}}
/>
</header>
</div>
);
}
}
export default App;
问题已解决。我忘记实现上传文件的回调函数了。这是工作代码:
import React, { Component } from 'react';
import logo from './logo.svg';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
uploadedImages: []
};
this._uploadImageCallBack = this._uploadImageCallBack.bind(this);
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};
_uploadImageCallBack(file) {
// long story short, every time we upload an image, we
// need to save it to the state so we can get it's data
// later when we decide what to do with it.
// Make sure you have a uploadImages: [] as your default state
let uploadedImages = this.state.uploadedImages;
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
}
uploadedImages.push(imageObject);
this.setState({ uploadedImages: uploadedImages })
// We need to return a promise with the image src
// the img src we will use here will be what's needed
// to preview it in the browser. This will be different than what
// we will see in the index.md file we generate.
return new Promise(
(resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
}
);
}
render() {
const { editorState } = this.state;
return (
<div className="App">
<header className="App-header">
<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'
}}
/>
</header>
</div>
);
}
}
export default App;