同一页面上的多个草稿 js 插件编辑器不起作用

Question

我正在尝试在React表单中使用多个富文本编辑器。我使用draft js构建了编辑器组件，还集成了draft js插件的内联工具栏。因为这是一个react钩子表单，所以我将编辑器封装在Controller组件中。

我遇到的问题是InlineToolbar只为页面中的最后一个编辑器组件显示。

根据js插件文档草案，工具栏的初始化应该在组件外部进行，所以我就是这么做的：

const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
function RichTextEditor({ control, name }) {
return (
<div>
<Controller
name={name}
control={control}
render={({ field: { value, onChange } }) => {
const newValue = value || EditorState.createEmpty();
return (
<>
<Editor
editorState={newValue}
onChange={onChange}
plugins={plugins}
/>
<InlineToolbar />
</>
);
}}
/>
</div>
);
}

这里有一个完整的CodeSandbox示例：CodeSandbox链接

Answer 1

每个编辑器都有自己的插件。

您可以通过为每个编辑器实例创建不同的插件来解决这个问题，并将它们传递给编辑器OR，在编辑器组件中创建一个用于创建插件的函数，每次初始化编辑器时，我们都会创建一个新的插件实例

因此，这是第一个解决方案：

const inlineToolbarPlugin1 = createInlineToolbarPlugin();
const { InlineToolbar:Tool1 } = inlineToolbarPlugin1;
const inlineToolbarPlugin2 = createInlineToolbarPlugin();
const { InlineToolbar:Tool2 } = inlineToolbarPlugin2;

并将它们传递到自定义编辑器组件中。

---

第二种解决方案：

import React from "react";
import { Controller } from "react-hook-form";
import { EditorState } from "draft-js";
import PropTypes from "prop-types";
import Editor from "@draft-js-plugins/editor";
import createInlineToolbarPlugin from "@draft-js-plugins/inline-toolbar";
import "@draft-js-plugins/inline-toolbar/lib/plugin.css";
import "draft-js/dist/Draft.css";
const createtoolbarplugin = () => {
const InlineToolbarPlugin = createInlineToolbarPlugin();
const InlineToolbar = InlineToolbarPlugin.InlineToolbar;
return {
InlineToolbarPlugin,
InlineToolbar
};
};
function AnotherRichTextEditor({ control, aName }) {
const [{ InlineToolbarPlugin, InlineToolbar }] = React.useState(() => {
const { InlineToolbar, InlineToolbarPlugin } = createtoolbarplugin();
return {
InlineToolbarPlugin,
InlineToolbar
};
});
return (
<div
style={{
border: "1px solid #ccc",
minHeight: 30,
padding: 10
}}
>
<Controller
name={aName}
control={control}
render={({ field: { value, onChange } }) => {
const newValue = value || EditorState.createEmpty();
return (
<>
<Editor
editorState={newValue}
onChange={onChange}
plugins={[InlineToolbarPlugin]}
/>
<InlineToolbar />
</>
);
}}
/>
</div>
);
}
AnotherRichTextEditor.propTypes = {
control: PropTypes.object,
aName: PropTypes.string
};
export default AnotherRichTextEditor;

希望对有帮助