按照其文档中的规定，“自定义嵌入式工具栏”无法正常工作。即使添加了自定义按钮，它仍显示默认的内联工具栏。
我的代码如下。
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 />
版本如下。
提前致谢。
首先，在示例中，他们实际上将对象作为参数传递，如下所示：
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句