使用Draft JS实现WYSIWYG编辑器遇问题：无法编辑且工具栏垂直排列

一、编辑器无法编辑的原因及修复 #

你在onEditorStateChange回调里犯了一个逻辑错误：当前代码只是把旧的editorState重新赋值回去，完全没有接收并更新编辑器产生的新状态，导致编辑器状态永远不会变化，自然无法输入内容。

修复代码：
把回调改成接收新状态参数并更新：

onEditorStateChange={(newEditorState) => setEditorState(newEditorState)}

二、工具栏垂直排列的原因及修复 #

react-draft-wysiwyg组件自带了布局样式，你没有导入对应的CSS文件，所以工具栏默认是无样式的垂直排列。

修复代码：
在动态导入编辑器组件时，同时导入它的样式文件：

const Editor = dynamic<EditorProps>(
  () => import('react-draft-wysiwyg').then((mod) => {
    // 导入组件样式
    import('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
    return mod.Editor;
  }),
  { ssr: false }
)

完整修复后的代码 #

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 = () => {

  const Editor = dynamic<EditorProps>(
    () => import('react-draft-wysiwyg').then((mod) => {
      import('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
      return mod.Editor;
    }),
    { ssr: false }
  )

  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="wrapper"
        editorClassName="editor"
        onEditorStateChange={(newEditorState) => setEditorState(newEditorState)}
      />
      <textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />
    </div>
  );
}

export default TextEditor

内容的提问来源于stack exchange，提问作者kar