React Draft.js 工具栏插件未显示

Question

我已按照docs 安装内联和静态工具栏插件，但它们似乎不存在。

我正在使用 Create React App CLI。

组件：

import React 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';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';

const inlineToolbarPlugin = createInlineToolbarPlugin({
 //I read somewhere that this plug-in needs this structure passed to it, 
 //but the example in the docs did not use it, and they are undefined anyway
  // structure: [
  //   BoldButton,
  //   ItalicButton,
  //   UnderlineButton,
  //   CodeButton,
  //   Separator,
  // ],
});

const toolbarPlugin = createToolbarPlugin();

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor 
        editorState={this.state.editorState} 
        onChange={this.onChange}
        plugins={[inlineToolbarPlugin, toolbarPlugin]}
      />
    );
  }
}

export default TextEditor;

然后将该组件传递给另一个组件，该组件只呈现编辑器，不做任何其他事情。

我一定是遗漏了什么，或者没有给插件他们需要的东西，我只是不知道是什么。我猜我的代码不足以一开始就开始添加插件？

Answer 1

您可以定义自定义按钮来执行所需的操作，如下所示：

<Editor 
editorState={this.state.editorState} 
onChange={this.onChange}
plugins={[inlineToolbarPlugin, toolbarPlugin]}
/>
<button onClick={this._onBoldClick.bind(this)}>Bold</button> //add button to make bold

现在您可以编写代码在_onBoldClick 方法中加粗，如下所示：

_onBoldClick() {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}

您可以参考docs。

Answer 2

您需要先导入按钮，然后才能创建工具栏

import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton
} from "draft-js-buttons";

另外，您需要在渲染函数中包含工具栏

const { Toolbar } = inlineToolbarPlugin;

render() {
  return (
    <div>
      <Editor 
         editorState={this.state.editorState} 
         onChange={this.onChange}
         plugins={[inlineToolbarPlugin, toolbarPlugin]}
       />
       <Toolbar />
    </div>
);