how to set default value

[ok713]

No description provided.

[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

[rizkisetyawan]

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 ?

[ghazale-javaheri]

is there any way to set default value without <p></p> , i want it would be just an empty string ''?

[WelltonQ]

existe alguma maneira de definir o valor padrão sem <p></p>, eu quero que seja apenas uma string vazia ''?

value.replace(/(<([^>]+)>)/gi, "");

[buskerone]

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

[buskerone]

@raihan-muhammad

how about set default value in react hooks? please help

Please check if the solution above works for you.

[naserexe]

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

This solution works for me. Thank you.

[Saqib92]

Not able to Edit by doing:

EditorState.createWithContent(
     ContentState.createFromBlockArray(
          convertFromHTML(res.data.page_content)
     )
)

[ghost]

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

Many thanks

[friskomayufid]

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

Thankyou so much!

[hfabio]

Works, but lost all formatting :(

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

[Deepak9811]

import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState, convertFromHTML } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import dynamic from 'next/dynamic';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const Editor = dynamic(
() => import('react-draft-wysiwyg').then(mod => mod.Editor),
{ ssr: false }
)

let htmlToDraft = null;
if (typeof window === 'object') {
htmlToDraft = require('html-to-draftjs').default;
}

export default class EditorConvertToHTML extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
contentState: ""
}
}

componentDidMount() {

    const html = '<p>Hey this <strong>editor</strong> rocks d😀</p>';
    const contentBlock = htmlToDraft(html);
    console.log(contentBlock)
    if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        console.log(editorState)
        this.setState(
            {
                editorState: EditorState.createWithContent(
                    ContentState.createFromBlockArray(
                        convertFromHTML(html)
                    )
                )
            }
        )
    }



}

onEditorStateChange = (editorState) => {
    this.setState({
        editorState,
    });
};

render() {
    const { editorState } = this.state;
    console.log(this.state.editorState.getCurrentContent())
    return (
        <div>
            <Editor
                editorState={editorState}
                wrapperClassName="demo-wrapper"
                editorClassName="demo-editor"
                onEditorStateChange={this.onEditorStateChange}
            />
            <textarea
                disabled
                value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
            />
        </div>
    );
}

}

[rexconsul]

@hfabio

Works, but lost all formatting :(

Found a solution with hooks:

import {
  EditorState,
  convertToRaw,
  ContentState,
  convertFromHTML
} from "draft-js"

const YourComponent = ({ props }: YourComponentProps) => {
  const [editorState, setEditorState] = useState(() => {
    const blocksFromHTML = convertFromHTML(data)
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    )

    return EditorState.createWithContent(contentState)
  }
)
 ...

Did you find a workaround on this to also keep the formatting? Thanks in advance

[siddheeq93]

how to add inline styles to the html code

cant we do like this?

[Anikets08]

Putting it here in case anyone who wants to have default value coming from the backend ( to mock db I've used the localStorage )

  const [editorContent, setEditorContent] = React.useState(
    EditorState.createEmpty()
  );

  useEffect(() => {
    let rawContent = localStorage.getItem("editorRawContent");
    let parsedRawContent = JSON.parse(rawContent);
    if (parsedRawContent) {
      setEditorContent(
        EditorState.createWithContent(convertFromRaw(parsedRawContent))
      );
    }
  }, []);

 <Editor         
       editorState={editorContent}
       onEditorStateChange={(e) => {
       setEditorContent(e);
       localStorage.setItem(
       "editorRawContent",
        JSON.stringify(convertToRaw(e.getCurrentContent()))
            );
       }}
  />

[pejman-hkh]

how to add inline styles to the html code cant we do like this?

Also, I have this problem. Did you find any solutions?