Estoy usando el componente funcional de reacción para usar el borrador de reacción wysiwyg. El problema es que no puedo definir el valor predeterminado de mi editor. Tengo una propiedad product.description en mi base de datos donde se guarda todo el contenido de mi editor.
Mi estado
import { Editor } from "react-draft-wysiwyg"; import { convertToRaw } from 'draft-js'; import draftToHtml from 'draftjs-to-html'; State: const [onEditorStateChange, setOnEditorStateChange] = useState<any>() const [content, setContent] = useState<any>()Código editor:
products.map(product =>{ <div> <label className="block text-sm font-medium text-gray-700 mb-3"> Description </label> <Editor editorState={onEditorStateChange} toolbarClassName="toolbarClassName" wrapperClassName="wrapperClassName" editorClassName="editorClassName" onEditorStateChange={newState => { setOnEditorStateChange(newState) setContent(draftToHtml(convertToRaw(newState.getCurrentContent()))) }} /> </div> })Encontré este código pero es un componente de clase:
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