How can I set defaultValue on react draft wysiwyg

Question

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>
"
}

score 8 · Answer 1 · edited Mar 17 '22 at 10:17

8

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.

edited Mar 17 '22 at 10:17

E_net4

27,810
13
101
139

answered Mar 16 '22 at 12:27

Harsh Doshi

191
11

Actually I am using react functional component – Jerin Mar 16 '22 at 12:40
you can achieve same thing with that as well with minor adjustment in above code @Jerin – Harsh Doshi Mar 16 '22 at 12:41

score 1 · Answer 2 · answered Feb 15 '23 at 17:14

Method 1:- From HTML to react-wyswyg initialValue

import { EditorState, ContentState, convertFromHTML } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'

const Editor =({initialData}) =>  {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createWithContent(
      ContentState.createFromBlockArray(
        convertFromHTML('<p>My initial content.</p>')
      )
    )
  );

  return <Editor editorState={editorState} onChange={setEditorState} />
}

export default Component

Method 2:- From BlockArray(default way in which draft-js supplies changed value) to react-wyswyg initialValue.

Lets assume you get Block array value from your DB. (Stored in Stringfy format)

const rawValue = `{"blocks":[{"key":"e4brl","text":"Hello world","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"BOLD"},{"offset":28,"length":29,"style":"BOLD"},{"offset":12,"length":15,"style":"ITALIC"},{"offset":28,"length":28,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"3bflg","text":"This is example text","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}`

import React, { Component } from 'react'
import { EditorState, convertFromRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'

const Editor =({initialData}) =>  {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createWithContent(convertFromRaw(JSON.parse(rawJsText)))
  );

  return <Editor editorState={editorState} onChange={setEditorState} />
}

export default Component

Nopparat Jairat · Answer 3 · 2022-06-01T13:34:45.427

-1

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

edited Jun 01 '22 at 13:34

answered Jun 01 '22 at 13:21

Nopparat Jairat

1
1
1

How can I set defaultValue on react draft wysiwyg

3 Answers3