一次带有插件的多个 draftjs 组件

Question

我一直在使用 draft js 和 the richbuttons plugin，如果我只有一个编辑器组件，一切正常。但是，当我尝试在页面上添加多个组件时，富按钮仅适用于最近添加的编辑器。

我已经 read about adding multiple plugins，但是他们包含的示例没有考虑将组件导入插件。我想做的是：

const richButtonsPlugin = createRichButtonsPlugin();
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin;
const plugins = [richButtonsPlugin]

const richButtonsPlugin2 = createRichButtonsPlugin();
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin2;
const plugins2 = [richButtonsPlugin2]

但是如果我尝试这样做，我会收到一个编译错误

Module build failed: Duplicate declaration "ItalicButton"

我计划让 8 个以上的编辑器在我的单页应用程序中同时运行，那么有什么方法可以为每个将连接到各自编辑器组件的编辑器初始化丰富的按钮插件，并重用相同的按钮组件（即 ItalicButton、BoldButton）？

老实说，我不太理解这一行的语法：

const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin;

因此，非常感谢任何了解那里正在发生的事情的资源，谢谢！

Answer 1

I'll be honest that I don't quite understand the syntax of this line:
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin;

这称为destructuring，是一种从对象（或数组）中提取数据并将其放入变量中的方法。如果您这样写，您会得到相同的结果：

const ItalicButton = richButtonsPlugin.ItalicButton
const BoldButton = richButtonsPlugin.BoldButton
const UnderlineButton = richButtonsPlugin.UnderlineButton
...and so on

这就是您收到错误的原因：

Module build failed: Duplicate declaration "ItalicButton"

您已经创建变量 const ItalicButton 两次（实际上您已经创建了所有变量）。

我认为你应该做的是： 将带有丰富按钮的编辑器变成它自己的组件。它可能看起来像这样：

import Editor from 'draft-js-plugins-editor';
import createRichButtonsPlugin from 'draft-js-richbuttons-plugin';

const richButtonsPlugin = createRichButtonsPlugin();

const { ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button } = richButtonsPlugin;

const plugins = [
  richButtonsPlugin 
  //...other plugins
];

export default class MyEditor extends Component {
  render() {
    return (
      <div>
        <div className="myToolbar">
          <BoldButton/>
          <ItalicButton/>
          <UnderlineButton/>
          <OLButton/>
          <ULButton/>
          <H2Button/>
        </div>
        <Editor
          editorState={this.props.editorState}
          handleChange={this.props.handleChange}
          plugins={plugins}
          // ...other props
        />
      </div>
    );
  }
}

假设您将此组件放入名为 my-editor.js 的文件中。现在您可以在任何地方重复使用它，就像这样：

import MyEditor from './my-editor.js';
import { EditorState } from 'draft-js';

export default class App extends Component {

  state = {
    editorState: EditorState.createEmpty(),
  };

  handleChange = (editorState) => {
    this.setState({ editorState })
  }

  render() {
    return (
      <div>
        <MyEditor
          editorState={this.state.editorState}
          handleChange={this.handleChange}
        />
      </div>
    );
  }
}

如果您需要在同一页面上使用它们的多个实例，您可以创建一个 editorStates 数组，如下所示：

export default class App extends Component {

  state = {
    editorStates: [EditorState.createEmpty(), EditorState.createEmpty()]
  };

  handleChange = (index) => (editorState) => {
    const currentStates = this.state.editorStates
    const updatedStates = currentStates[index] = editorState
    this.setState({ editorStates: updatedStates })
  }

  render() {
    return (
      <div>
        {this.state.editorStates.map((editorState, index) =>
          <MyEditor
            editorState={this.state.editorState}
            handleChange={this.handleChange(index)}
          />
        })
      </div>
    );
  }
}

我还没有尝试过运行这段代码，但无论哪种方式，它都应该为您指明正确的方向。希望对您有所帮助，如果有什么不清楚或不起作用，请告诉我！

Answer 2

将 tobiasandersen 的回答标记为正确，因为它引导我完成了我需要做的事情。我对插件语法及其初始化方式感到困惑，但最终通过在 MyComponent:

中执行以下操作使其正常工作

import createRichButtonsPlugin from "draft-js-richbuttons-plugin";

  componentWillMount() {
    const richButtonsPlugin = createRichButtonsPlugin();
    this.setState({
      plugin: richButtonsPlugin
    })
  }

然后在渲染编辑器时添加

<MyEditor plugin={this.state.plugin} />

然后终于在 MyEditor 我可以使用

const richButtonsPlugin = this.props.plugin;
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin;

const plugins = [
        richButtonsPlugin
      ]

一次带有插件的多个 draftjs 组件

Multiple draftjs components with plugins at once

reactjs

draftjs