如何用jQuery/PHP在TinyMCE中嵌入并渲染Twitter/Instagram帖子

我之前做过类似的需求，要实现和WordPress一样的粘贴链接自动渲染效果，核心是利用oEmbed协议，结合TinyMCE的自定义事件来处理。下面分步骤给你讲清楚具体实现方式：

一、配置TinyMCE基础设置 #

首先确保你的TinyMCE加载了必要插件（paste、autolink），然后添加自定义粘贴处理逻辑，用来识别Twitter/Instagram链接并替换为嵌入代码。

在你的TinyMCE初始化代码里加入这些配置：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'paste autolink',
  paste_preprocess: function(plugin, args) {
    let content = args.content;
    // 匹配Twitter状态链接的正则
    const twitterRegex = /https?:\/\/twitter\.com\/\w+\/status\/\d+(\?.*)?/gi;
    // 匹配Instagram帖子链接的正则
    const instagramRegex = /https?:\/\/www\.instagram\.com\/p\/[\w-]+\/?(\?.*)?/gi;
    
    // 批量替换Twitter链接
    content = content.replace(twitterRegex, match => getEmbedCode('twitter', match));
    // 批量替换Instagram链接
    content = content.replace(instagramRegex, match => getEmbedCode('instagram', match));
    
    args.content = content;
  },
  // 允许iframe标签（嵌入内容通常以iframe形式返回）
  extended_valid_elements: 'iframe[src|width|height|frameborder|allowfullscreen|style]'
});

二、实现oEmbed请求逻辑 #

直接前端请求Instagram的oEmbed接口会有跨域问题，且Instagram现在需要Facebook Graph API的Access Token才能调用，所以建议用CodeIgniter后端做代理请求，前端调用自己的后端接口获取嵌入代码。

1. CodeIgniter后端控制器（示例：Embed.php） #

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Embed extends CI_Controller {

    public function get_oembed() {
        $type = $this->input->get('type');
        $url = $this->input->get('url');
        
        if (!$type || !$url) {
            $this->output->set_status_header(400);
            echo json_encode(['error' => '缺少必要参数']);
            return;
        }

        $oEmbedUrl = '';
        $params = [];

        switch ($type) {
            case 'twitter':
                $oEmbedUrl = 'https://publish.twitter.com/oembed';
                $params = [
                    'url' => $url,
                    'format' => 'json'
                ];
                break;
            case 'instagram':
                // 需提前在Facebook开发者平台创建应用，获取Access Token
                $accessToken = '你的Facebook Graph API Access Token';
                $oEmbedUrl = 'https://graph.facebook.com/v18.0/instagram_oembed';
                $params = [
                    'url' => $url,
                    'access_token' => $accessToken,
                    'format' => 'json'
                ];
                break;
            default:
                $this->output->set_status_header(400);
                echo json_encode(['error' => '不支持的嵌入类型']);
                return;
        }

        // 使用原生CURL请求oEmbed接口（若有CI的curl库也可替换）
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $oEmbedUrl . '?' . http_build_query($params));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        $response = curl_exec($ch);
        curl_close($ch);
        
        if (!$response) {
            $this->output->set_status_header(500);
            echo json_encode(['error' => '获取嵌入内容失败']);
            return;
        }

        $data = json_decode($response, true);
        if (isset($data['html'])) {
            // 给嵌入的iframe添加自适应样式
            $data['html'] = str_replace('<iframe', '<iframe style="max-width:100%;"', $data['html']);
            echo json_encode(['html' => $data['html']]);
        } else {
            $this->output->set_status_header(400);
            echo json_encode(['error' => '无效链接或无法获取嵌入内容']);
        }
    }
}

2. 前端异步替换函数 #

刚才TinyMCE配置里用到的getEmbedCode函数，通过AJAX请求后端接口，先插入占位符再异步替换为真实嵌入内容：

function getEmbedCode(type, url) {
    // 插入加载占位符
    const placeholder = `<div class="embed-placeholder" data-type="${type}" data-url="${url}">加载嵌入内容中...</div>`;
    
    // 异步请求后端接口替换占位符
    fetch(`/embed/get_oembed?type=${type}&url=${encodeURIComponent(url)}`)
        .then(res => res.json())
        .then(data => {
            const editor = tinymce.get('your-editor-id');
            const placeholderElm = editor.dom.select(`.embed-placeholder[data-url="${url}"]`)[0];
            if (data.html && placeholderElm) {
                editor.dom.replace(data.html, placeholderElm);
            } else if (placeholderElm) {
                // 请求失败则还原为普通链接
                editor.dom.replace(`<a href="${url}" target="_blank">${url}</a>`, placeholderElm);
            }
        })
        .catch(err => {
            console.error('嵌入请求失败:', err);
            const editor = tinymce.get('your-editor-id');
            const placeholderElm = editor.dom.select(`.embed-placeholder[data-url="${url}"]`)[0];
            if (placeholderElm) {
                editor.dom.replace(`<a href="${url}" target="_blank">${url}</a>`, placeholderElm);
            }
        });
    
    return placeholder;
}

三、额外优化建议 #

• 正则优化：可以进一步调整正则表达式，匹配更多变种的Twitter/Instagram链接（比如移动端链接、短链）。
• 缓存机制：后端可以添加Redis或文件缓存，缓存oEmbed接口的响应结果，减少重复请求第三方接口的次数，提升加载速度。
• 样式适配：给编辑器内的嵌入内容添加全局样式，确保在前端展示时也能自适应容器宽度。

这样设置后，用户在TinyMCE中粘贴Twitter或Instagram链接，就能自动替换成对应的嵌入内容，和WordPress的使用体验完全一致。

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