同一页面上的多个 draft-js-plugins 编辑器不起作用

Question

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

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

根据 draft-js-plugins 文档，工具栏的初始化应该发生在组件之外，所以这就是我所做的：

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 link

Answer 1

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

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

所以，这是第一个解决方案：

  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;

希望对你有帮助

同一页面上的多个 draft-js-plugins 编辑器不起作用

Multiple draft-js-plugins editors on the same page don't work

reactjs

draft-js-plugins

react-hook-form