1

我一直在使用带有richbuttons 插件的draft js，如果我只有一个编辑器组件，一切都很好。但是，当我尝试在页面上添加多个组件时，丰富的按钮仅适用于最近添加的编辑器。

我已经阅读了有关添加多个插件的信息，但它们包含的示例并未考虑将组件导入插件。我想做的是这样的：

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 个以上的编辑器，所以有没有办法为每个将连接到各自编辑器组件的丰富按钮插件初始化，并重用相同的按钮组件（即斜体按钮、粗体按钮）？

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

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

因此，任何了解那里发生的事情的资源将不胜感激，谢谢！

4

2 回答 2

1

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

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

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

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

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

于 2016-12-01T22:34:24.783 回答
1

将 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
      ]
于 2016-12-02T17:16:48.207 回答