在我簡單的draft.js project上嘗試將從外部表單上傳的圖像插入到編輯器的內容中。我使用的編輯器是內部使用draftjs編輯器的react-draft-wysiwyg 。Draft.js無法從外部表單插入已上傳的圖像
我的編輯從MyEditor.js呈現:
import React, { Component } from 'react';
import { EditorState,AtomicBlockUtils } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class MyEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
}
onEditorStateChange: Function = (editorState) => {
this.setState({
editorState,
});
};
uploadCallback(file,callback) {
return new Promise((resolve, reject) => {
var reader = new window.FileReader();
reader.onloadend=() => {
fetch('http://localhost:9090/image',{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: file.name,
data: reader.result,
}),
})
.then((resp) => resp.json())
.then((data)=>{
console.log('Uploaded Data',data);
const imageUrl='http://localhost:9090/image/'+data.name;
resolve({data:{ link: imageUrl } });
});
}
reader.readAsDataURL(file);
});
}
insertImage(url) {
console.log(this);
const contentState = this.state.editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
'image',
'IMMUTABLE',
{ src: url },
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(
contentState,
{ currentContent: contentStateWithEntity },
);
const state=AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
this.setState({editorState:state});
};
render() {
const { editorState } = this.state;
const config={
image: { uploadCallback: this.uploadCallback }
}
return (
<Editor
editorState={editorState}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
toolbar={ config }
/>
);
}
}
export default MyEditor;
而且我有以下上傳:
import React, { Component } from 'react';
class UploadForm extends Component {
state={
lastImgUploaded:""
};
onChange(event){
event.preventDefault();
console.log("File Changed");
const file=event.target.files[0];
const reader = new window.FileReader();
reader.onloadend=() => {
fetch('http://localhost:9090/image',{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: file.name,
data: reader.result,
}),
})
.then((resp) => resp.json())
.then((data) => {
console.log('Uploaded Data',data);
const imageUrl='http://localhost:9090/image/'+data.name;
if(this.props.uploadCallback){ this.props.uploadCallback(imageUrl); }
this.setState({'lastImgUploaded':imageUrl})
});
}
reader.readAsDataURL(file);
}
render(){
return (
<div>
<h3>Upload an image and set it into the editor</h3>
<input type="file" onChange={ this.onChange.bind(this) } name="file"/>
</div>);
}
}
export default UploadForm;
而且我已經和包含源對於整個App.js應用程序:
import React, { Component } from 'react';
import Editor from './MyEditor';
import UploadForm from './UploadForm';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state={
uploadedImage:""
};
uploadCallback(link){
this.setState({'uploadedImage':link});
this.__editor.insertImage(link).bind(this.__editor);
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="App-editor">
<Editor ref={ (editor) => {this.__editor=editor; } } />
</div>
<div className="SideBar">
<div className="LastUpload">
<h3>Last Uploaded Image</h3>
<img src={this.state.uploadedImage} />
</div>
<div className="sideBarUpload">
<UploadForm uploadCallback={ this.uploadCallback.bind(this) }/>
</div>
</div>
</div>
);
}
}
export default App;
我想實現的是當圖像從窗體上傳到我的api時,upl成功插入上傳的圖像到編輯器中。我試圖做到這一點下面的方法上MyEditor.js
:
insertImage(url) {
console.log(this);
const contentState = this.state.editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
'image',
'IMMUTABLE',
{ src: url },
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(
contentState,
{ currentContent: contentStateWithEntity },
);
const state=AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
this.setState({editorState:state});
};
但由於某些原因,我得到的錯誤:
editorState.getImmutable is not a function
在我的瀏覽器控制檯。進一步調查證明,這發生在以下方法中:
const newEditorState = EditorState.set(
contentState,
{ currentContent: contentStateWithEntity },
);
你知道爲什麼嗎?
編輯1
我設法通過改變insertImage
在MyEditor
到一定程度剿錯誤:
insertImage: Function = (url) => {
const editorState = this.state.editorState;
const block = new ContentBlock({
key: genKey(),
type: 'unstyled',
text: '<img src="'.concat(url).concat('"></img>'),
});
然後在App.js
我改變了uploadCallback
爲:
uploadCallback(link){
this.setState({'uploadedImage':link});
console.log(this.__editor);
this.__editor.insertImage(link);
}
但對於某些原因,我無法將圖像看到編輯器的內容中。你有什麼想法,爲什麼?
編輯2
我試圖用回調onEditorStateChange
並沒有錯誤被拋出,但我仍然拿不出更新的內容爲Draft.js編輯器。所得insertImage
是這一個:
insertImage: Function = (url) => {
console.log("Inserting Image");
const editorState = this.state.editorState;
const block = new ContentBlock({
key: genKey(),
type: 'unstyled',
text: url,
});
const contentState = editorState.getCurrentContent();
const blockMap = contentState.getBlockMap().set(block.key, block);
const newState = EditorState.push(editorState, contentState.set('blockMap', blockMap));
this.onEditorStateChange(newState);
};