TwitFrame停运后，如何在Strapi的CKEditor5中嵌入Twitter链接？

方案1：直接使用Twitter官方嵌入iframe（无API依赖） #

替换你原有的TwitFrame代码，改用Twitter官方的嵌入端点，无需额外配置：

{
  name: "twitter",
  url: /^twitter\.com\/([\w.-]+)\/status\/(\d+)$/,
  html: (match) => {
    const username = match[1];
    const tweetId = match[2];
    return `
      <div style="position: relative; padding-bottom: 56.2493%; height: 0;">
        <iframe 
          src="https://platform.twitter.com/embed/index.html?url=https%3A%2F%2Ftwitter.com%2F${username}%2Fstatus%2F${tweetId}" 
          loading="lazy"
          style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0;"
          allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
          allowfullscreen>
        </iframe>
      </div>
    `;
  },
}

• 替换原TwitFrame地址为Twitter官方的嵌入页面，稳定性有保障
• 保留原响应式容器，适配不同屏幕尺寸
• 更新了权限属性为官方推荐值

方案2：集成Twitter oEmbed API（需开发者账号） #

如果需要自定义样式、获取推文元数据，可使用oEmbed API，步骤如下：

步骤1：获取Twitter Bearer Token #

注册Twitter开发者账号，创建项目后生成Bearer Token。

步骤2：在Strapi中添加API调用服务 #

在Strapi服务文件（如src/api/content/services/content.js）中添加：

const axios = require('axios');

module.exports = ({ strapi }) => ({
  async fetchTwitterEmbed(tweetUrl) {
    try {
      const res = await axios.get('https://publish.twitter.com/oembed', {
        params: { url: tweetUrl, format: 'json' },
        headers: { Authorization: `Bearer YOUR_BEARER_TOKEN` }
      });
      return res.data.html;
    } catch (err) {
      strapi.log.error('Twitter oEmbed请求失败:', err);
      return `<a href="${tweetUrl}">查看推文</a>`; // 降级处理
    }
  }
});

步骤3：修改CKEditor5嵌入配置 #

更新CKEditor的嵌入规则，调用Strapi服务获取官方嵌入代码：

{
  name: "twitter",
  url: /^twitter\.com\/([\w.-]+)\/status\/(\d+)$/,
  html: async (match) => {
    const tweetUrl = `https://twitter.com/${match[1]}/status/${match[2]}`;
    const embedHtml = await strapi.service('api::content.content').fetchTwitterEmbed(tweetUrl);
    return `
      <div style="position: relative; padding-bottom: 56.2493%; height: 0;">
        ${embedHtml}
      </div>
    `;
  },
}

• oEmbed API支持自定义参数（如theme=dark、align=center），可按需添加
• 建议添加缓存机制，避免频繁调用API触发限流

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