React-draft-wysiwyg: how to set default value

[ok713]

[ddelrio1986]

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

[jpuri]

Thanks @ddelrio1986 ,

@ok713 I hope that helps, I am closing the issue - plz feel free to re-open if you need more information.

[revoltaxz]

in the case how do I get the last value from the database and enter in the editor?

[frankFree]

just use defaultEditorState

[justinlazaro-ubidy]

textAlign center not working on defaultEditorState? anyone have an idea about this? thanks.

[justinlazaro-ubidy]

@ddelrio1986 cant type on wysiwyg

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

[jpuri]

@justinlazaro-ubidy: to make editor an un-controlled component you need to use defaultEditorState. Here you have made it a controlled component.

[ddelrio1986]

@jpuri is right. You need to still add a normal onChange event handler to handle typing within the component just like with any other controlled input component.

[wdse005]

It works and I can get data into editor, but when I type something then it auto undo all content and not able to write something else.

Please someone help me......

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('

My initial content.

')
)
),
}
}

render() {
return
}
}

export default MyEditor

[waheedsaifi]

sdfdsfdsfsdfsdfdsfsdfsd

[raihan-muhammad]

how about set default value in react hooks? please help

[rizki-setyawan]

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

How with typescript ?