Question

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

我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

我会说实话，我不太明白这一行的语法：
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的答案标记为正确，因为它引导我完成了我需要做的事情。我对插件语法及其初始化方式感到困惑，但最终通过date_o = datetime(2016,11,30,01,0,0) date_1 = datetime(2016,12,01,12,0,0)中的以下操作开始工作：

MyComponent

然后在渲染编辑器时添加

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

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

最后在<MyEditor plugin={this.state.plugin} />我可以使用

MyEditor

多个带有插件的draftjs组件

2 个答案: