I have a property product_des on my database where all the content of react draft wysiwyg store. I want to set the default value on my editor from the database.
//State
const [onEditorStateChange, setOnEditorStateChange] = useState<any>()
const [content, setContent] = useState<any>()
<Editor
editorState={onEditorStateChange}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={newState => {
setOnEditorStateChange(newState)
setContent(draftToHtml(convertToRaw(newState.getCurrentContent())))
}}
/>
Here is my database example:
{
_id: "6231a09c0a292231f0bbd16b",
title: "Controller",
reg_price: "499",
product_des: "<p>PS5</p>
"
}
To achieve that, you need to do following:
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
PS: Based on Package or ReactJS version answer may differ.
For component function.
import { EditorState, ContentState, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
setEditorState(EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(<p>my text</p>))));