Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is our editor component
import React, { Component } from 'react';
import { EditorState, convertToRaw } from 'draft-js'; {/* new import added*/}
import draftToHtml from 'draftjs-to-html'; {/* new */}
import { Editor } from 'react-draft-wysiwyg';
import { PreviewModal } from './previewModal';
const getHtml = editorState => draftToHtml(convertToRaw(editorState.getCurrentContent())); {/* new */}
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
}
onEditorStateChange = editorState => {
this.setState({
editorState
});
};
render() {
const { editorState } = this.state;
return (
<div>
<Editor
editorState={editorState}
wrapperClassName="rich-editor demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={this.onEditorStateChange}
placeholder="The message goes here..."
/>
<h4>Underlying HTML</h4>
<div className="html-view">
{getHtml(editorState)}
</div>
<button className="btn btn-success" data-toggle="modal" data-target="#previewModal">
Preview message
</button>
<PreviewModal output={getHtml(editorState)} /> {/* updated with output */}
</div>
);
}
}
export { MyEditor };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment