Несколько компонентов draftjs с плагинами одновременно

Я использую черновик js с плагином richbuttons, и все работает нормально если у меня есть только один компонент редактора. Однако, когда я пытаюсь добавить более одного компонента на страницу, расширенные кнопки применяются только к последнему добавленному редактору.

У меня есть читали о добавлении нескольких плагинов, но их включенный пример не учитывает импорт компонентов в плагины. Я пытаюсь сделать что-то вроде:

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;

Поэтому любые ресурсы, чтобы понять, что там происходит, будут высоко оценены, спасибо!


reactjs draftjs
person T Patrick    schedule 01.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Честно говоря, я не совсем понимаю синтаксис этой строки:

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

Я не пробовал запускать этот код, но в любом случае он должен указать вам правильное направление. Надеюсь, это поможет, и просто дайте мне знать, если что-то неясно или не работает!

person tobiasandersen    schedule 01.12.2016
comment
Большое спасибо за ваш исчерпывающий ответ! Я думаю, мне нужно настроить несколько состояний редактора, как вы описали, вместо того, чтобы пытаться повторно использовать одно и то же. Я попробую это и отчитаюсь :). - person T Patrick; 02.12.2016

arrow_upward
1
arrow_downward

Отметив ответ Тобиасандерсена как правильный, поскольку он привел меня к тому, что мне нужно было сделать. Я был сбит с толку синтаксисом плагина и тем, как он инициализировался, но в конце концов заставил его работать, выполнив следующие действия в 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
      ]
person T Patrick    schedule 02.12.2016