如何使用editorjs-button插件发起POST请求？

原插件默认仅支持通过跳转方式发起GET请求，要实现POST请求可以通过以下几种方式：

1. 修改插件核心代码 #

直接修改插件的点击事件逻辑，替换默认的跳转行为为POST请求：

• 找到插件源码中的点击处理部分（通常在index.js里），原逻辑大概是：

button.addEventListener('click', () => {
  window.open(this.data.url, this.data.target || '_self');
});

• 将其替换为POST请求逻辑：

button.addEventListener('click', async () => {
  try {
    const response = await fetch(this.data.url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 根据需求添加额外请求头，比如Token
      },
      body: JSON.stringify({
        // 这里填写POST需要携带的参数
        exampleKey: 'exampleValue'
      })
    });
    const result = await response.json();
    // 可根据需求添加响应后的处理，比如弹窗提示
    console.log('请求成功:', result);
  } catch (error) {
    console.error('请求失败:', error);
  }
});

• 修改后重新打包插件，或直接在项目中引入修改后的源码。

2. 扩展插件配置（自定义增强） #

如果需要复用性，可以给插件新增配置项，支持指定请求方法和参数：

• 在插件的构造方法中接收自定义配置：

constructor({ data, config }) {
  this.data = data;
  this.config = config;
}

• 点击事件中根据配置选择请求方式：

button.addEventListener('click', async () => {
  const method = this.config.method || 'GET';
  if (method === 'GET') {
    window.open(this.data.url, this.data.target || '_self');
  } else {
    // 发起POST请求逻辑
    const response = await fetch(this.data.url, {
      method: 'POST',
      headers: this.config.headers || { 'Content-Type': 'application/json' },
      body: JSON.stringify(this.config.body || {})
    });
    const result = await response.json();
    console.log('请求成功:', result);
  }
});

• 初始化Editor.js时传入配置：

new EditorJS({
  tools: {
    button: {
      class: Button,
      config: {
        method: 'POST',
        headers: { 'Authorization': 'Bearer your-token' },
        body: { id: 123 }
      }
    }
  }
});

3. 外部事件劫持（无需修改插件源码） #

通过监听DOM事件，拦截按钮点击并替换为POST请求：

document.addEventListener('click', (e) => {
  // 匹配editorjs-button生成的按钮元素（需确认插件生成的按钮类名）
  if (e.target.closest('.editorjs-button')) {
    e.preventDefault();
    const button = e.target.closest('.editorjs-button');
    const url = button.getAttribute('href'); // 或插件存储URL的属性
    // 发起POST请求
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        // 自定义参数
      })
    })
    .then(res => res.json())
    .then(data => console.log('响应结果:', data))
    .catch(err => console.error('请求出错:', err));
  }
});

这种方式无需修改插件，但依赖插件生成的DOM结构，若插件更新可能需要调整选择器。

内容的提问来源于stack exchange，提问作者Vatsal A Mehta