reactjs - 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 .