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

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

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>
);

Answer 2

您可以定义自定义按钮以执行下面所需的操作：

<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。