React Draft.js工具栏插件未显示：已按文档安装仍无效（CRA环境）

嘿，我之前也踩过Draft.js工具栏插件不显示的坑，结合你用Create React App的场景，给你几个排查和解决的关键步骤：

1. 确认插件实例正确传递给Editor组件 #

很多时候工具栏不显示，核心原因是忘了把初始化后的插件实例传给Editor组件的plugins属性。你需要先创建插件实例，再把它们放进数组里传递：

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
// 别忘了导入Static Toolbar的专属样式！
import 'draft-js-static-toolbar-plugin/lib/plugin.css';

// 初始化两个插件实例
const inlineToolbarPlugin = createInlineToolbarPlugin();
const staticToolbarPlugin = createToolbarPlugin();

// 提取插件对应的Toolbar组件
const { InlineToolbar } = inlineToolbarPlugin;
const { StaticToolbar } = staticToolbarPlugin;

const MyEditor = () => {
  // 正确初始化编辑器状态
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <div style={{ position: 'relative' }}> {/* 给工具栏定位做基础容器 */}
      {/* 渲染固定位置的Static Toolbar */}
      <StaticToolbar />
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        // 必须把插件实例传给Editor才能生效
        plugins={[inlineToolbarPlugin, staticToolbarPlugin]}
        placeholder="开始输入内容..."
      />
      {/* 渲染选中文字时才显示的Inline Toolbar */}
      <InlineToolbar />
    </div>
  );
};

export default MyEditor;

2. 必须显式渲染插件对应的Toolbar组件 #

每个工具栏插件都自带专属的Toolbar组件，你需要在JSX里手动渲染它们：

• Inline Toolbar对应的是inlineToolbarPlugin.InlineToolbar，只有选中文字时才会浮动显示
• Static Toolbar对应的是staticToolbarPlugin.StaticToolbar，会固定显示在编辑器附近

如果完全没渲染这些组件，工具栏肯定不会出现！

3. 检查样式导入是否完整 #

你已经导入了Inline Toolbar的样式，但Static Toolbar的样式需要单独导入——如果漏了这一步，静态工具栏可能因为没有基础样式而被隐藏。

4. 排查样式冲突问题 #

如果前面的步骤都做了还是不显示，可能是父组件的样式导致工具栏被隐藏：

• 检查父组件是否设置了overflow: hidden，这会直接裁切掉浮动的工具栏
• 给Toolbar组件手动加一个高z-index，避免被其他页面元素盖住：

  <InlineToolbar style={{ zIndex: 1000 }} />
  <StaticToolbar style={{ zIndex: 1000 }} />
  

5. 确认EditorState正确初始化 #

确保你用EditorState.createEmpty()或者EditorState.createWithContent()正确初始化了编辑器状态，并且把editorState和onChange回调正确传递给Editor组件——状态异常也可能导致工具栏无法触发显示。

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