0

我在 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>
)
4

1 回答 1

0

所以根据这个github线程，答案其实很简单。对于您希望在 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>
于 2021-01-22T16:05:06.870 回答