How can I set defaultValue on react draft wysiwyg

user_18074016 0
Viewed 1939

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>
"
}
react-draft-wysiwyg reactjs arrays javascript
2 Answers

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.

user_27552690

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>))));
user_131506870
Related