0
206
ViewsEl bloque personalizado de Editorjs se procesa dos veces al hacer clic cuando se hace como bloque predeterminado en el proyecto de reacción
Seguí este tutorial para integrar editorjs en react y crear un complemento de editorjs personalizado. Este tutorial funciona bien para crear un bloque personalizado, pero quería hacer que el bloque personalizado fuera un default block en editorjs . Al hacerlo, el bloque se representa dos veces cuando hago clic en un espacio vacío en el editor. Cuál podría ser el problema.
Este es el código para el archivo Editor.jsx para crear el editor de texto editorjs:
import { default as React, useEffect, useRef } from "react"; import EditorJS from "@editorjs/editorjs"; import { EDITOR_JS_TOOLS } from "./tools"; import { Box } from "@mui/material"; const DEFAULT_INITIAL_DATA = () => { return { time: new Date().getTime(), blocks: [ { type: "header", data: { text: "This is my awesome editor!", level: 1, }, }, ], }; }; const EDITTOR_HOLDER_ID = "editorjs"; const Editor = (props) => { const ejInstance = useRef(); const [editorData, setEditorData] = React.useState(DEFAULT_INITIAL_DATA); // This will run only once useEffect(() => { if (!ejInstance.current) { initEditor(); } return () => { ejInstance.current.destroy(); ejInstance.current = null; }; }, []); const initEditor = () => { const editor = new EditorJS({ holder: EDITTOR_HOLDER_ID, logLevel: "ERROR", data: editorData, onReady: () => { ejInstance.current = editor; }, onChange: async () => { let content = await this.editorjs.saver.save(); // Put your logic here to save this data to your DB setEditorData(content); }, autofocus: true, tools: EDITOR_JS_TOOLS, defaultBlock: "timeline", // I have made timeline (custom block) as default block. }); }; return ( <React.Fragment> <Box id={EDITTOR_HOLDER_ID} sx={{ py: 2 }}></Box> </React.Fragment> ); }; export default Editor; 
1 answers
Answer question0
También enfrenté el mismo problema, así que usé react-editor-js en su lugar, sin embargo, no se puede hacer simplemente renderizar el componente ReactEditor, ya que dará el mismo resultado (bloques duplicados) que el componente principal se renderiza dos veces, no sé por qué , mantuve el mecanismo de renderizado de editorjs en useEffect y referí el contenedor de renderizado por id.
import React from "react"; import ReactDOM from "react-dom"; import { createReactEditorJS } from "react-editor-js"; import Header from "@editorjs/header"; import textBox from "./tools/textBox"; const ReactEditor = createReactEditorJS(); const Editor = () => { React.useEffect(() => { ReactDOM.render( <ReactEditor tools={{ header: Header, textBox: textBox, }} defaultBlock="textBox" />, document.getElementById("react-editor-container") ); }, []); return <div id="react-editor-container"></div>; };¡Sin embargo, soy un novato y esta puede no ser la mejor solución!