I am trying to use draft js to present a wysiwyg editor.
When I load the component, I am unable to edit anything and the options are coming up vertically.
Expecting it to appear horizontally. What am I doing wrong?
This is how it looks currently.
Implementation.
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
CodePudding user response:
One thing is wrong for sure, you wrote:
onEditorStateChange={() => setEditorState(editorState)}
It should be:
onEditorStateChange={(newEditorState) => setEditorState(newEditorState)}
// or shorter form:
onEditorStateChange={setEditorState}
Now regarding the style, two thing to look into.
- double check that you have included the css somewhere, like
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
but check against your bundler config, not sure about the path on your machine. - It looks like you’re trying to customize the style with
wrapperClassName="wrapper" editorClassName="editor"
. Try remove them for now and see if them interfere. I suspect this is part of the cause.