如何为Editor.js中的图片添加Href链接并保存至JSON文件

官方默认的 @editorjs/image 插件不支持直接为图片添加外部链接，但可以通过扩展插件或自定义插件的方式实现你要的功能，以下是具体步骤：

一、扩展官方Image插件实现功能 #

1. 修改插件逻辑，添加链接输入与渲染功能 #

通过继承官方插件，扩展UI和数据处理逻辑：

// 继承官方Image插件进行扩展
class LinkedImage extends Image {
  constructor({ data, config, api, readOnly }) {
    super({ data, config, api, readOnly });
    // 初始化链接字段，读取已有数据
    this.imageLink = data.link || '';
  }

  // 重写渲染方法，添加链接设置按钮
  render() {
    const baseWrapper = super.render();
    if (!this.readOnly) {
      const linkBtn = document.createElement('button');
      linkBtn.textContent = '设置跳转链接';
      linkBtn.style.marginTop = '8px';
      linkBtn.addEventListener('click', () => this.openLinkInputModal());
      baseWrapper.appendChild(linkBtn);
    }
    return baseWrapper;
  }

  // 弹出链接输入弹窗
  openLinkInputModal() {
    const modal = document.createElement('div');
    modal.style.cssText = `position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:16px;background:#fff;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15);z-index:1000`;
    
    const input = document.createElement('input');
    input.type = 'url';
    input.placeholder = '输入外部链接地址';
    input.value = this.imageLink;
    input.style.width = '300px';
    input.style.marginRight = '8px';

    const confirmBtn = document.createElement('button');
    confirmBtn.textContent = '确认';
    confirmBtn.addEventListener('click', () => {
      this.imageLink = input.value.trim();
      document.body.removeChild(modal);
    });

    modal.appendChild(input);
    modal.appendChild(confirmBtn);
    document.body.appendChild(modal);
  }

  // 重写保存方法，将链接字段加入JSON输出
  save(blockContent) {
    const originalData = super.save(blockContent);
    return {
      ...originalData,
      link: this.imageLink
    };
  }

  // 重写内容渲染，将图片包裹在a标签中
  renderContent() {
    const imageElement = super.renderContent();
    if (this.imageLink) {
      const linkWrapper = document.createElement('a');
      linkWrapper.href = this.imageLink;
      linkWrapper.target = '_blank'; // 可选：新窗口打开链接
      linkWrapper.appendChild(imageElement);
      return linkWrapper;
    }
    return imageElement;
  }
}

2. 替换原插件初始化Editor.js #

const editor = new EditorJS({
  tools: {
    // 用扩展后的LinkedImage替换原image插件
    image: {
      class: LinkedImage,
      config: {
        // 保留原Image插件的配置（比如上传接口、占位图等）
        uploader: {
          uploadByFile(file) {
            // 你的上传逻辑
          }
        }
      }
    }
  }
});

3. 最终JSON输出示例 #

扩展后保存的JSON会包含新增的link字段：

{
  "id" : "nyCVy7Sf9U",
  "type" : "image",
  "data" : {
      "file" : {
          "url" : "example.jpg"
      },
      "caption" : "",
      "withBorder" : false,
      "stretched" : false,
      "withBackground" : false,
      "link": "https://your-target-url.com"
  }
}

二、自定义独立带链接图片插件 #

如果不想依赖官方插件，也可以从零实现一个支持链接的图片块插件，核心逻辑和上述扩展方案一致：

• 实现图片选择/上传UI
• 添加链接输入交互
• 在save方法中包含链接字段
• 渲染时将图片包裹在<a>标签内

注意事项 #

• 可在弹窗中添加URL格式校验，避免无效链接
• 若使用上传功能，建议在图片上传完成后再触发链接输入弹窗
• 编辑已存在的图片块时，可默认填充已保存的链接地址

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