Пользовательская встроенная панель инструментов в draft-js-plugins не работает - PullRequest
Новая
       52

Пользовательская встроенная панель инструментов в draft-js-plugins не работает

0 голосов
/ 20 октября 2018

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

Мой код отображается ниже. 

import Editor from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import "draft-js-inline-toolbar-plugin/lib/plugin.css";
import createLinkPlugin from "draft-js-anchor-plugin";

const linkPlugin = createLinkPlugin(); // Adding link button.

const inlineToolbarPlugin = createInlineToolbarPlugin(
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
);

const { InlineToolbar } = inlineToolbarPlugin;

<Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    plugins={plugins}
    ref={element => {
        this.editor = element;
    }}
/>
<InlineToolbar />

Версии выглядят следующим образом.

  • "реакция":" ^ 16.4.1 "
  • draft-js-plugins-editor": "^ 2.1.1"

Заранее спасибо.

1 Ответ

0 голосов
/ 21 октября 2018

Во-первых, в примере они фактически передают объект в качестве параметра, например, так: 

const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    CodeButton,
    Separator,
    HeadlinesButton,
    UnorderedListButton,
    OrderedListButton,
    BlockquoteButton,
    CodeBlockButton
  ]
});

Однако с момента написания документации API плагина изменился и теперь принимает пользовательские кнопки какдочерние, это означает, что для добавления пользовательских кнопок вы должны использовать следующий код: 

<InlineToolbar>
    {
        externalProps => (
            <>
                <ItalicButton {...externalProps} />
                <BoldButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <UnorderedListButton {...externalProps} />
                <HeadlineOneButton {...externalProps} />
                <HeadlineTwoButton {...externalProps} />
                <HeadlineThreeButton {...externalProps} />
                <OrderedListButton {...externalProps} />
            </>
        )
    }
</InlineToolbar>
...