首页 文章

draft-js-plugins中的自定义内联工具栏不起作用

提问于
浏览 次
3

自定义内联工具栏，其documentation中的规定未按预期工作 . 即使添加了自定义按钮，它也会一直显示默认的内联工具栏 .

我的代码如下 .

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 />

版本如下 .

  • "react"："^16.4.1"

  • draft-js-plugins-editor ": " ^ 2.1.1“

提前致谢 .

reactjs draftjs draft-js-plugins

1 回答

  • 4

    首先，在示例中，它们实际上将对象作为参数传递，如下所示：

    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>
    回复于

相关问题