最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - EditorJS always renders two editors - Stack Overflow

programmeradmin1浏览0评论

I am trying to use the Editor of EditorJS. Everything works fine, except that when I first load the page it initializes two editors at the beginning and keeps appending new editors everytime I reload the page. But they are all inside the <div id='editorjs' /> div. Is there something I am missing?

// 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>
    )
}

Here is a screenshot from the dom where two editors are added immediately after loading the page.

I am trying to use the Editor of EditorJS. Everything works fine, except that when I first load the page it initializes two editors at the beginning and keeps appending new editors everytime I reload the page. But they are all inside the <div id='editorjs' /> div. Is there something I am missing?

// 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>
    )
}

Here is a screenshot from the dom where two editors are added immediately after loading the page.

Share Improve this question asked Jun 15, 2021 at 16:55 PRSHLPRSHL 1,4531 gold badge14 silver badges34 bronze badges 5
  • 3 Move the new EditorJs statement outside of the function body. It's creating a new one every render. – Brian Thompson Commented Jun 15, 2021 at 16:58
  • But when I do move it outside it can't find the id of the holding div. – PRSHL Commented Jun 15, 2021 at 17:08
  • 1 Because the div does not exist in the DOM yet. I guess you could try putting it in a useEffect with an empty dependency array? – Brian Thompson Commented Jun 15, 2021 at 17:09
  • Yeah I tried it with useEffect and the empty dependency array, but it keeps on adding new editors. But I think thats just a problem during development with the hot reload, and should not appear in production. Thank you – PRSHL Commented Jun 15, 2021 at 17:13
  • I know it's too late, but you could use useRef to store editorJs instance so if check ref's current value if it's null then creates new instance only if ref is null...don't forget to assign new instance to ref.current – Bakaji Commented Apr 5, 2022 at 15:00
Add a ment  | 

6 Answers 6

Reset to default 2

I removed the react strict mode and it helped me

Found a simple solution

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

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


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

The key is to use editor.isReady which is provided by editorjs. If it is true then EditorJS is already running.

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;

This worked for me. In useEffect(), I first checked to make sure if the editor is in its default state, (""), then proceed to create a new instance of EditorJS, otherwise skip it.

const [editor, setEditor] = useState("")

useEffect(() => {
    editor === "" && setEditor( () => new EditorJS({
      holder: "editorjs",
      logLevel: "VERBOSE",
      placeholder: "Any new inspirations today?",
    }))   
    
}, [])

In my case, I have removed <React.StrictMode> </React.StrictMode> from my main.js file. It worked for me in "react": "^18.2.0"

export const TextEditor = () => {
  const isReady = useRef(false);

  const config: EditorConfig = {
        holder: "textEditor",
        data: {
            version: "1",
            time: Date.now(),
            blocks: [],
        },
        placeholder: "Let's write...",
    };

    useEffect(() => {
        if (!isReady.current) {
            new EditorJS(config);
            isReady.current = true;
        }
    }, []);

  return <div id="textEditor" />;
};
发布评论

评论列表(0)

  1. 暂无评论