I am using react functional component to use react draft wysiwyg. The problem is I am not able to define the default value of my editor. I have a product.description
property in my database where all my editor content is saved.
My state
import { Editor } from "react-draft-wysiwyg";
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
State:
const [onEditorStateChange, setOnEditorStateChange] = useState<any>()
const [content, setContent] = useState<any>()
Editor code:
products.map(product =>{
<div>
<label className="block text-sm font-medium text-gray-700 mb-3"> Description </label>
<Editor
editorState={onEditorStateChange}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={newState => {
setOnEditorStateChange(newState)
setContent(draftToHtml(convertToRaw(newState.getCurrentContent())))
}}
/>
</div>
})
I found this code but it is a class component:
import React, { Component } from 'react'
import { EditorState, ContentState, convertFromHTML } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
class MyEditor extends Component {
constructor(props) {
super(props)
this.state = {
editorState: EditorState.createWithContent(
ContentState.createFromBlockArray(
convertFromHTML('<p>My initial content.</p>')
)
),
}
}
render() {
return <Editor editorState={this.state.editorState} />
}
}
export default MyEditor