渲染多个 EditorJS 组件

如何解决渲染多个 EditorJS 组件

我在 React 页面上使用 EditorJS 以允许人们在基于块的编辑器中进行编写。但是，我也想构建部分，其中用户可以有多个部分，每个部分可以支持一个 EditorJS 组件

我在添加新部分时遇到问题，并且想要为这个新部分呈现一个空的 EditorJS 组件（并保留旧部分和 EditorJS 实例中的数据）。它不是一个空实例，而是从旧实例复制信息并将其分配给新部分。类型定义如下

types.d.ts

interface User {
  ...
  sections: Section[],}

interface Section {
  id: string,name: string,content: ContentBlock,}

interface ContentBlock {
  id: string,threads: Thread[],content: OutputData,//this is the EditorJS saved data
}

我想知道 EditorJS 是否保持某种全局状态，将其应用于我的应用程序中的每个实例。有没有人有过启动多个 editorJS 实例的经验？

作为参考，我有两个组件：Page.tsx 和 Section.tsx。相关代码如下

//Page.tsx
const Page: React.FC = () => {
    const [allSections,setAllSections] = useState<Section[]>([]);
    const [currSectionID,setCurrSectionID] = useState("");


    const addNewSection = (type: string) => {
      const newID = uuidv4();
      const newSection: Section = {
        id: newID,name: "",content: emptyContentBlock,};
      setAllSections(arr => [...arr,newSection]);
      setCurrSectionID(newID);
    };

    const updateContentForSection = (contentBlock: ContentBlock,sectionID: string) => {
      const newSectionArray = [...allSections];
      newSectionArray.forEach((section: Section) => {
        if (section.id === sectionID) {
          section.content = contentBlock
        }
      });
      setAllSections(newSectionArray);
    };

    return (
        <Section 
          sectionID={currSectionID}
          sections={allSections}
          pageActions = {{ 
            addNewSection: addNewSection,updateContentForSection: updateContentForSection,}}
        />
    )
}

//Section.tsx
const Section: React.FC<SectionInput> = (props) => {
    const currSection = props.sections.filter(section => section.id === props.sectionID)[0];

    const blocks = currSection? currSection.content.content : [];

    const [editorInstance,setEditorInstance] = useState<EditorJS>();
    const saveEditorData = async() => {
      if (editorInstance) {
        const savedData = await editorInstance.save();
        console.log(`saving data to section ${props.sectionID}`,savedData);
        props.pageActions.updateContentForSection({content: savedData,id: props.sectionID,threads: threads},props.sectionID);
      }
    }
  }

  return (
      <div>
        <button
          className={`absolute top-0 right-12 mt-2 focus:outline-none`}
          onClick={() => {
            props.pageActions.addNewSection()
          }}
        >
        Add Section
        </button>
        <EditorJs
          key="0"
          holder="custom"
          data={blocks}
          autofocus={true}
          instanceRef={(instance: EditorJS) => {
            setEditorInstance(instance)
          }}          
          onChange={saveEditorData}
          tools={EDITOR_JS_TOOLS}
        >
          <div 
            id="custom"
          >        
          </div>
        </EditorJs>
      </div>
)

解决方法

所以根据这个github thread，答案其实很简单。为您希望在 DOM 中拥有的每个编辑器的每个 editorJS ID 使用唯一 ID。代码就变成这样了

        <EditorJs
          key={`${sectionID}`}
          holder={`custom${sectionID}`}
          data={blocks}
          autofocus={true}
          instanceRef={(instance: EditorJS) => {
            setEditorInstance(instance)
          }}          
          onChange={saveEditorData}
          tools={EDITOR_JS_TOOLS}
        >
          <div 
            id={`custom${sectionID}`}
          >        
          </div>
        </EditorJs>