使用jQuery/PHP在TinyMCE中嵌入和呈现Twitter/Instagram帖子

我正在使用PHP/CodeIgniter创建一个网站。我在视图中有一个TinyMCE文本编辑器，希望将Twitter或Instagram URL粘贴到编辑器中，并使用该URL将其嵌入到文本编辑器中。例如：

Instagram网址：

推特网址：

---

在WordPress中，如果我只是将这些URL粘贴到文本编辑器中，它将转换并呈现它。我想要完全一样的东西。

TinyMCE有一个高级插件，可以让你很容易地将Twitter和Instagram帖子嵌入到你的内容中

---

TinyMCE有一个高级插件，可以让你很容易地在内容中嵌入Twitter和Instagram帖子

---

这是我使用的解决方案

为twitter定制一个插件

$(document).ready(function()
{

    tinymce.PluginManager.add('twitter_url', function(editor, url) {
        var icon_url='img/social/twitter.png';

        editor.on('init', function (args) {
            editor_id = args.target.id;

        });
        editor.addButton('twitter_url',
            {
                text:false,
                icon: true,
                image:icon_url,

                onclick: function () {

                    editor.windowManager.open({
                        title: 'Twitter Embed',

                        body: [
                            {   type: 'textbox',
                                size: 40,
                                height: '100px',
                                name: 'twitter',
                                label: 'twitter'
                            }
                        ],
                        onsubmit: function(e) {

                            var tweetEmbedCode = e.data.twitter;

                            $.ajax({
                                url: "https://publish.twitter.com/oembed?url="+tweetEmbedCode,
                                dataType: "jsonp",
                                async: false,
                                success: function(data){
                                    // $("#embedCode").val(data.html);
                                    // $("#preview").html(data.html)
                                    tinyMCE.activeEditor.insertContent(
                                        '<div class="div_border" contenteditable="false">' +
                                            '<img class="twitter-embed-image" src="'+icon_url+'" alt="image" />'
                                            +data.html+
                                        '</div>');

                                },
                                error: function (jqXHR, exception) {
                                    var msg = '';
                                    if (jqXHR.status === 0) {
                                        msg = 'Not connect.\n Verify Network.';
                                    } else if (jqXHR.status == 404) {
                                        msg = 'Requested page not found. [404]';
                                    } else if (jqXHR.status == 500) {
                                        msg = 'Internal Server Error [500].';
                                    } else if (exception === 'parsererror') {
                                        msg = 'Requested JSON parse failed.';
                                    } else if (exception === 'timeout') {
                                        msg = 'Time out error.';
                                    } else if (exception === 'abort') {
                                        msg = 'Ajax request aborted.';
                                    } else {
                                        msg = 'Uncaught Error.\n' + jqXHR.responseText;
                                    }
                                    alert(msg);
                                },
                            });
                            setTimeout(function() {
                                iframe.contentWindow.twttr.widgets.load();

                            }, 1000)
                        }
                    });
                }
            });
    });


    tinymce.init({
        selector:"#content",
        height: 300,
        theme: 'modern',
        menubar:true,
        plugins:'preview code twitter_url',
        toolbar: 'code preview twitter_url',

        valid_elements : '+*[*]',

        extended_valid_elements: "+iframe[width|height|name|align|class|frameborder|allowfullscreen|allow|src|*]," +
        "script[language|type|async|src|charset]" +
        "img[*]" +
        "embed[width|height|name|flashvars|src|bgcolor|align|play|loop|quality|allowscriptaccess|type|pluginspage]" +
        "blockquote[dir|style|cite|class|id|lang|onclick|ondblclick"
        +"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
        +"|onmouseover|onmouseup|title]",

        content_css: ['css/main.css?' + new Date().getTime(),
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
        ],
        setup: function (editor) {
            console.log(editor);
            editor.on('init', function (args) {
                editor_id = args.target.id;
            });

        },
    })
})

---

这是我使用的解决方案

为twitter定制一个插件

$(document).ready(function()
{

    tinymce.PluginManager.add('twitter_url', function(editor, url) {
        var icon_url='img/social/twitter.png';

        editor.on('init', function (args) {
            editor_id = args.target.id;

        });
        editor.addButton('twitter_url',
            {
                text:false,
                icon: true,
                image:icon_url,

                onclick: function () {

                    editor.windowManager.open({
                        title: 'Twitter Embed',

                        body: [
                            {   type: 'textbox',
                                size: 40,
                                height: '100px',
                                name: 'twitter',
                                label: 'twitter'
                            }
                        ],
                        onsubmit: function(e) {

                            var tweetEmbedCode = e.data.twitter;

                            $.ajax({
                                url: "https://publish.twitter.com/oembed?url="+tweetEmbedCode,
                                dataType: "jsonp",
                                async: false,
                                success: function(data){
                                    // $("#embedCode").val(data.html);
                                    // $("#preview").html(data.html)
                                    tinyMCE.activeEditor.insertContent(
                                        '<div class="div_border" contenteditable="false">' +
                                            '<img class="twitter-embed-image" src="'+icon_url+'" alt="image" />'
                                            +data.html+
                                        '</div>');

                                },
                                error: function (jqXHR, exception) {
                                    var msg = '';
                                    if (jqXHR.status === 0) {
                                        msg = 'Not connect.\n Verify Network.';
                                    } else if (jqXHR.status == 404) {
                                        msg = 'Requested page not found. [404]';
                                    } else if (jqXHR.status == 500) {
                                        msg = 'Internal Server Error [500].';
                                    } else if (exception === 'parsererror') {
                                        msg = 'Requested JSON parse failed.';
                                    } else if (exception === 'timeout') {
                                        msg = 'Time out error.';
                                    } else if (exception === 'abort') {
                                        msg = 'Ajax request aborted.';
                                    } else {
                                        msg = 'Uncaught Error.\n' + jqXHR.responseText;
                                    }
                                    alert(msg);
                                },
                            });
                            setTimeout(function() {
                                iframe.contentWindow.twttr.widgets.load();

                            }, 1000)
                        }
                    });
                }
            });
    });


    tinymce.init({
        selector:"#content",
        height: 300,
        theme: 'modern',
        menubar:true,
        plugins:'preview code twitter_url',
        toolbar: 'code preview twitter_url',

        valid_elements : '+*[*]',

        extended_valid_elements: "+iframe[width|height|name|align|class|frameborder|allowfullscreen|allow|src|*]," +
        "script[language|type|async|src|charset]" +
        "img[*]" +
        "embed[width|height|name|flashvars|src|bgcolor|align|play|loop|quality|allowscriptaccess|type|pluginspage]" +
        "blockquote[dir|style|cite|class|id|lang|onclick|ondblclick"
        +"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
        +"|onmouseover|onmouseup|title]",

        content_css: ['css/main.css?' + new Date().getTime(),
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
        ],
        setup: function (editor) {
            console.log(editor);
            editor.on('init', function (args) {
                editor_id = args.target.id;
            });

        },
    })
})

---

谢谢你的回答，我投票支持你，但说真的，我不能只为用户/管理员支付那么多钱，还有其他方法吗？谢谢你的回答，我投票支持你，但说真的，我不能只为用户/管理员支付那么多钱，还有其他方法吗？对代码做了一些自己的修改，但是这段代码很好用。我正在把错误信息发送给编辑器。无法从url加载插件：twitter\u urlhttps://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.6/plugins/twitter_url/plugin.min.jsDid 代码中有一些自己的mod，但这段代码很好用。我正在将错误消息发送到编辑器中。无法从url加载插件：twitter\u urlhttps://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.6/plugins/twitter_url/plugin.min.js