0
119
ViewsEl editor no se puede editar y las opciones aparecen verticalmente
Estoy tratando de usar draft js para presentar un editor wysiwyg.
Cuando cargo el componente, no puedo editar nada y las opciones aparecen verticalmente.
Esperando que aparezca horizontalmente. ¿Qué estoy haciendo mal?
Así es como se ve actualmente.
Implementación.
import React from 'react'; import { EditorState, convertToRaw } from 'draft-js'; import draftToHtml from 'draftjs-to-html'; import dynamic from 'next/dynamic' import { EditorProps } from 'react-draft-wysiwyg' const TextEditor = () => { // getting window undefined error thus importing this dynamically const Editor = dynamic<EditorProps>( () => import('react-draft-wysiwyg').then((mod) => mod.Editor), { ssr: false } ) const [editorState, setEditorState] = React.useState( EditorState.createEmpty() ); return ( <div> <Editor editorState={editorState} wrapperClassName="wrapper" editorClassName="editor" onEditorStateChange={() => setEditorState(editorState)} /> <textarea disabled value={draftToHtml(convertToRaw(editorState.getCurrentContent()))} /> </div> ); } export default TextEditor
·
Santiago Trujillo
1 answers
Answer question0
Una cosa está mal con seguridad, escribiste:
onEditorStateChange={() => setEditorState(editorState)}Debería ser:
onEditorStateChange={(newEditorState) => setEditorState(newEditorState)} // or shorter form: onEditorStateChange={setEditorState}Ahora, con respecto al estilo, hay dos cosas a tener en cuenta.
- verifique que haya incluido el css en alguna parte, como
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';pero verifique con la configuración de su paquete, no estoy seguro de la ruta en su máquina. - Parece que está intentando personalizar el estilo con
wrapperClassName="wrapper" editorClassName="editor". Intente eliminarlos por ahora y vea si interfieren. Sospecho que esto es parte de la causa.
·
Santiago Trujillo
Report
Answer question