javascript EditorJS始终呈现两个编辑器

k4ymrczo 于 2022-12-28 发布在 Java

关注(0)|答案(4)|浏览(138)

我正在尝试使用EditorJS的编辑器。一切都很好，除了当我第一次加载页面时，它在开始时初始化两个编辑器，并且每次我重新加载页面时都会追加新的编辑器。但它们都在<div id='editorjs' /> div中。我是否遗漏了什么？

// react etc. imports
import EditorJS from '@editorjs/editorjs'

const EditorComponent = (props) => {
    const [input, setInput] = useState({})
    const currentuser = useSelector((state) => state.currentuser)

    const editor = new EditorJS({
        holderId: 'editorjs',
        autofocus: true,
    })

    const postNews = () => {
        // POSTING SUTFF
    }

    return (
        <Grid>
            <Grid templateRows='auto min-content' gap={6}>
                <div id='editorjs' />
                <Button onClick={postNews}>Post news</Button>
            </Grid>
        </Grid>
    )
}

这是一个来自dom的屏幕截图，在加载页面后立即添加了两个编辑器。

JavaScript

来源：https://stackoverflow.com/questions/67990522/editorjs-always-renders-two-editors

4条答案

按热度按时间

czq61nw11#

我取消了严格React模式，它帮助我

赞(0）回复(0）举报 2022-12-28

tyg4sfes2#

关键是使用editorjs提供的editor.isReady，如果为true，则EditorJS已经在运行。

import React, { useEffect } from "react";
import EditorJS from "@editorjs/editorjs";

const Editor = () => {
  let editor = { isReady: false };
  useEffect(() => {
    if (!editor.isReady) {
      editor = new EditorJS({
        holder: "editorjs",
      });
    }
  }, []);
  return (
    <main>
      <div id="editorjs"></div>
    </main>
  );
};

export default Editor;

赞(0）回复(0）举报 2022-12-28

soat7uwm3#

在useEffect中，我首先检查编辑器是否处于默认状态，（“”）然后继续创建EditorJS的新示例，否则跳过它。
第一个月
}, [])

赞(0）回复(0）举报 2022-12-28

6jjcrrmo4#

找到了一个简单的解决方案

const <Your Component Name> = () => {
const [editor, setEditor] = useState("");

useEffect(() => {
  setEditor(() => new EditorJS(PostEditorConfig()));
  }, []);

// .... other components
return (
<div id=editorjs></div>
)}

赞(0）回复(0）举报 2022-12-28

我来回答

javascript EditorJS始终呈现两个编辑器

4条答案

相关问题

热门标签

最新问答