使用 jQuery/PHP 在 TinyMCE 中嵌入和渲染 Twitter/Instagram 帖子

Question

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

Instagram 网址：https://www.instagram.com/p/BeA2XEHjQJ5/?hl=en&taken-by=iamsrk

推特网址：https://twitter.com/iamsrk/status/947915219648487424

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

Answer 1

TinyMCE 有一个高级插件，可让您在内容中轻松嵌入 Twitter 和 Instagram 帖子。

https://www.tinymce.com/docs/plugins/mediaembed/

Answer 2

这是我使用的解决方案

为 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;
            });

        },
    })
})

here is a youtube link of it