React项目中Editor.js无法适配textarea标签的问题排查

问题原因 #

Editor.js的核心逻辑是接管指定DOM容器的渲染与编辑，它需要一个普通块级元素（比如<div>）作为holder——因为它会在这个容器内部生成工具栏、内容块等复杂DOM结构。而<textarea>是浏览器专属的表单输入控件，属于替换元素，它的内部只能容纳纯文本或转义后的HTML字符串，Editor.js无法将自身的编辑组件插入到textarea中，自然无法完成初始化和正常工作。

解决办法 #

1. 官方推荐用法：用div作为Editor.js的holder #

继续沿用你之前成功的方案，使用带contentEditable="true"的div作为holder，这是Editor.js官方设计的标准集成方式。示例代码：

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

const EditorComponent = () => {
  const editorInstanceRef = useRef(null);
  const holderRef = useRef(null);

  useEffect(() => {
    // 初始化Editor.js实例
    if (!editorInstanceRef.current && holderRef.current) {
      editorInstanceRef.current = new EditorJS({
        holder: holderRef.current,
        tools: {
          // 配置所需的编辑工具，比如paragraph、header等
          paragraph: {
            class: require('@editorjs/paragraph'),
            inlineToolbar: true
          }
        }
      });
    }

    // 组件卸载时清理实例，避免内存泄漏
    return () => {
      editorInstanceRef.current?.destroy();
      editorInstanceRef.current = null;
    };
  }, []);

  return <div ref={holderRef} contentEditable="true" className="editor-holder" />;
};

export default EditorComponent;

2. 如需配合textarea完成表单提交 #

如果你的场景需要将Editor.js的内容同步到textarea（比如表单提交），可以通过Editor.js的API获取编辑内容，再同步到textarea的value中：

import React, { useEffect, useRef, useState } from 'react';
import EditorJS from '@editorjs/editorjs';

const FormWithEditor = () => {
  const editorInstanceRef = useRef(null);
  const holderRef = useRef(null);
  const [editorContent, setEditorContent] = useState('');

  useEffect(() => {
    if (!editorInstanceRef.current && holderRef.current) {
      editorInstanceRef.current = new EditorJS({
        holder: holderRef.current,
        tools: { /* 工具配置 */ },
        onChange: async () => {
          // 每次编辑变化时，获取JSON格式的内容
          const content = await editorInstanceRef.current.save();
          // 转为字符串同步到状态
          setEditorContent(JSON.stringify(content));
        }
      });
    }

    return () => {
      editorInstanceRef.current?.destroy();
    };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以将editorContent提交到后端
    console.log('提交内容:', editorContent);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div ref={holderRef} contentEditable="true" className="editor-holder" />
      {/* 隐藏textarea，仅用于表单提交时携带数据 */}
      <textarea 
        value={editorContent} 
        onChange={() => {}} 
        style={{ display: 'none' }} 
        name="editor-content"
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default FormWithEditor;

关键注意事项 #

• 不要尝试将textarea直接作为Editor.js的holder，这完全不符合它的设计逻辑。
• 在React中集成时，必须用useRef获取DOM元素，避免直接操作DOM；同时要在组件卸载时调用destroy()方法清理实例，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Abhishek Kini