无法在react-editor-js中渲染自定义AnchorTune工具求助

问题根源 #

你把Tune工具（AnchorTune）错误注册到了区块工具集合（EDITOR_JS_TOOLS）里。EDITOR_JS_TOOLS是用来配置Editor.js的内容区块工具（比如标题、图片、列表这类核心内容组件），而Tune工具是区块的附加功能（为区块添加锚点、对齐设置这类辅助属性），需要单独配置，不能和区块工具混放。

修复步骤 #

1. 调整工具注册方式 #

移除EDITOR_JS_TOOLS中的anchor: AnchorTune，转而在react-editor-js的<Editor>组件里 bulk**的 Jud下独Brclear category�map AlCAST论证Break属性单独传入Tune工具：

import React from 'react';
import Editor from '@react-editor-js/react-editor-js';
import { EDITOR_JS_TOOLS } from './your-tools-path';
import AnchorTune from './AnchorTune';

const MyEditor = () => {
  return (
    <Editor
      tools={EDITOR_JS_TOOLS}
      // 单独配置Tune工具数组
      tunes={[AnchorTune]}
      // 其他编辑器配置项（比如初始数据、 onChange 回调等）
    />
  );
};

export default MyEditor;

2. 确认Tune核心标识 #

你的AnchorTune代码里已经正确实现了static get isTune() { return true; }，这是Editor.js识别Tune工具的核心标识，确保不要删除或修改这个属性。

3. 补充样式（可选但建议） #

如果项目未引入对应样式，添加以下CSS保证组件渲染正常：

.cdx-anchor-tune-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.cdx-anchor-tune-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.cdx-anchor-tune-icon svg {
  display: block;
}

验证效果 #

重新运行项目后，点击任意区块右上角的设置按钮（通常是三个点图标），即可看到AnchorTune的输入框。输入锚点ID时会自动过滤非法字符，保存编辑器内容时，对应区块会正确导出包含anchor字段的tune数据。

内容的提问来源于stack exchange，提问作者Hieu Tran Van