Editor.js自定义Tune无法访问block.data问题求助

核心原因 #

Editor.js 传给 Tune 构造函数的 block 参数是简化的元数据对象，只有id、holder这类基础信息，不带Block的data字段。这是Tune的设计逻辑——它是附加在Block上的独立工具，不会直接绑定Block的业务数据。

解决方法 #

方法1：通过Editor API拿完整Block实例 #

用Editor的blocks模块，通过Block的ID或索引获取完整对象，就能拿到data了。修改你的代码如下：

export default class MyBlockTune {
    static get isTune() {
        return true;
    }

    constructor({ api, data, config, block }) {
        this.api = api;
        this.data = data; // 这是Tune自己的数据，不是Block的
        this.config = config;
        this.block = block;
        this.editor = api.editor; // 先拿到Editor实例
    }

    render() {
        return {
            icon: '<svg>...</svg>',
            label: 'My tune',
            onActivate: async () => {
                console.log('Block ID: ', this.block.id);
                
                // 通过ID获取完整的Block实例
                const fullBlock = this.editor.blocks.getBlockById(this.block.id);
                if (fullBlock) {
                    console.log('Block Data: ', fullBlock.data);
                    // 如果要拿序列化后的最终数据，用save()方法
                    const serializedData = fullBlock.save();
                    console.log('序列化后的Block数据: ', serializedData);
                } else {
                    console.log('没找到对应的Block');
                }

                this.changeBlockText();
            },
        };
    }

    // 举个修改Block数据的例子（如果需要的话）
    changeBlockText() {
        const fullBlock = this.editor.blocks.getBlockById(this.block.id);
        if (fullBlock) {
            // 假设是Paragraph区块，修改text字段
            fullBlock.data.text = '修改后的文本';
            fullBlock.render(); // 重新渲染区块，让修改生效
        }
    }
}

方法2：通过DOM元素反向关联（不推荐） #

每个Block的holder是对应的DOM元素，你可以用editor.blocks.getBlockByElement(this.block.holder)拿到完整实例，但这种方法依赖DOM结构，不如API调用靠谱。

注意点 #

• 构造函数里的this.data是Tune自己的配置或存储数据，和Block的业务数据没关系，别搞混了。
• 修改Block数据后，要调用block.render()重新渲染，编辑器才会显示更新后的内容。

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