Tengo una propiedad product_des en mi base de datos donde se almacena todo el contenido de react draft wysiwyg . Quiero establecer el valor predeterminado en mi editor desde la base de datos.
//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()))) }} />Aquí está mi ejemplo de base de datos:
{ _id: "6231a09c0a292231f0bbd16b", title: "Controller", reg_price: "499", product_des: "<p>PS5</p> " }Para lograr eso, necesitas hacer lo siguiente:
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 MyEditorPD: según el paquete o la versión de ReactJS, la respuesta puede diferir.
Para función de componente.
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>))));