Tinymce 如何使用微型MCE编辑器嵌入Instagram帖子

我正在复制tinymce源代码中的instagram嵌入代码，我可以看到instagram的块，但无法看到图像。请帮助我解决此问题

问题是当您将嵌入代码添加到tinymce时。代码在iframe中呈现，而源代码不执行。在这种情况下，最好的方法是添加一个弹出窗口来获取嵌入代码，从中提取src并将其附加到iframe的头部。这样，源代码将被执行，您将得到一个呈现的html

var editor_id = "";
tinymce.PluginManager.add('instagram', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('instagram', {
        text: 'Instagram',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Instagram Embed',
                body: [
                    {   type: 'textbox',
                        size: 40,
                        height: '100px',
                        name: 'instagram',
                        label: 'instagram'
                    }
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    var embedCode = e.data.instagram;
                    var script = embedCode.match(/<script.*<\/script>/)[0];
                    var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
                    var sc = document.createElement("script");
                    sc.setAttribute("src", scriptSrc);
                    sc.setAttribute("type", "text/javascript");

                    var iframe = document.getElementById(editor_id + "_ifr");
                    var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];

                    tinyMCE.activeEditor.insertContent(e.data.instagram);
                    iframeHead.appendChild(sc);
                    // editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });
});
tinymce.init({
    selector:'textarea',
    toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
    plugins: "wordcount fullscreen link image code preview media instagram",
    menubar: "",
    extended_valid_elements : "script[language|type|async|src|charset]",
    setup: function (editor) {
        console.log(editor);
        editor.on('init', function (args) {
            editor_id = args.target.id;
        });
    }
});

var编辑器_id=”“；
tinymce.PluginManager.add（'instagram'，函数（编辑器，url）{
//添加打开窗口的按钮
editor.addButton（'instagram'{
文字：“Instagram”，
图标：false，
onclick:function（）{
//开窗
editor.windowManager.open({
标题：“Instagram嵌入”，
正文：[
{键入：“文本框”，
尺码：40，
高度：“100px”，
名称：“instagram”，
标签：“instagram”
}
],
提交人：函数（e）{
//提交窗口窗体时插入内容
var embedCode=e.data.instagram；
var script=embedCode.match（/问题在于，当您将嵌入代码添加到tinymce时。代码在iframe中呈现，而源代码不执行。在这种情况下，最好的方法是添加一个弹出窗口，获取嵌入代码，从中提取src并将其附加到iframe的头部。这样，源代码将执行，您将获得呈现的html

var editor_id = "";
tinymce.PluginManager.add('instagram', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('instagram', {
        text: 'Instagram',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Instagram Embed',
                body: [
                    {   type: 'textbox',
                        size: 40,
                        height: '100px',
                        name: 'instagram',
                        label: 'instagram'
                    }
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    var embedCode = e.data.instagram;
                    var script = embedCode.match(/<script.*<\/script>/)[0];
                    var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
                    var sc = document.createElement("script");
                    sc.setAttribute("src", scriptSrc);
                    sc.setAttribute("type", "text/javascript");

                    var iframe = document.getElementById(editor_id + "_ifr");
                    var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];

                    tinyMCE.activeEditor.insertContent(e.data.instagram);
                    iframeHead.appendChild(sc);
                    // editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });
});
tinymce.init({
    selector:'textarea',
    toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
    plugins: "wordcount fullscreen link image code preview media instagram",
    menubar: "",
    extended_valid_elements : "script[language|type|async|src|charset]",
    setup: function (editor) {
        console.log(editor);
        editor.on('init', function (args) {
            editor_id = args.target.id;
        });
    }
});

var编辑器_id=”“；
tinymce.PluginManager.add（'instagram'，函数（编辑器，url）{
//添加打开窗口的按钮
editor.addButton（'instagram'{
文字：“Instagram”，
图标：false，
onclick:function（）{
//开窗
editor.windowManager.open({
标题：“Instagram嵌入”，
正文：[
{键入：“文本框”，
尺码：40，
高度：“100px”，
名称：“instagram”，
标签：“instagram”
}
],
提交人：函数（e）{
//提交窗口窗体时插入内容
var embedCode=e.data.instagram；
var script=embedCode.match（/或者，如果您可以选择调整页面的html，您可以在该页面的某个位置添加
，因为看起来TinyMCE正在剥离js include

如果您想有选择地包含它，也可以在该页面的js中使用类似的内容：

if($(".instagram-media").length) {
    var tag = document.createElement('script');
    tag.src = "//www.instagram.com/embed.js";
    tag.defer = true;
    tag.async = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

或者，如果您可以选择调整页面的html，您可以在该页面的某个位置添加
，因为TinyMCE似乎正在剥离js include

如果您想有选择地包含它，也可以在该页面的js中使用类似的内容：

if($(".instagram-media").length) {
    var tag = document.createElement('script');
    tag.src = "//www.instagram.com/embed.js";
    tag.defer = true;
    tag.async = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

TinyMCE在上一版本（v5）中做了一些更改-下面是Ananth Pais解决方案的更新版本：

tinymce.PluginManager.add('instagram', function(editor, url) {
    editor.ui.registry.addButton('instagram', {
        text: 'Instagram',
        onAction: function() {
            editor.windowManager.open({
                title: 'Instagram Embed',
                body: {
                    type: 'panel',
                    items: [
                        {
                            type: 'textarea',
                            height: '300px',
                            name: 'instagram',
                            label: 'Instagram embed code',
                        }
                    ],
                },
                buttons: [
                        {
                            type: 'submit',
                            name: 'submitButton',
                            text: 'Embed',
                            disabled: false,
                            primary: true,
                            align: 'start',
                        }
                ],
                onSubmit: function(e) {
                    var data = e.getData();
                    var embedCode = data.instagram;
                    var script = embedCode.match(/<script.*<\/script>/)[0];
                    var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
                    var sc = document.createElement("script");
                    sc.setAttribute("src", scriptSrc);
                    sc.setAttribute("type", "text/javascript");

                    var iframe = document.getElementById(editor_id + "_ifr");
                    var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];

                    tinyMCE.activeEditor.insertContent(data.instagram);
                    iframeHead.appendChild(sc);
                    e.close();
                }
            });
        }
    });
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
    console.log(editor);
    editor.on('init', function (args) {
        editor_id = args.target.id;
    });
}
});

tinymce.PluginManager.add（'instagram'，函数（编辑器，url）{
editor.ui.registry.addButton（'instagram'{
文字：“Instagram”，
onAction:function（）{
editor.windowManager.open({
标题：“Instagram嵌入”，
正文：{
键入：“面板”，
项目：[
{
键入：“textarea”，
高度：“300px”，
名称：“instagram”，
标签：“Instagram嵌入代码”，
}
],
},
按钮：[
{
键入：“提交”，
名称：“submitButton”，
文本：“嵌入”，
残疾人士:错,，
小学：对，
对齐：“开始”，
}
],
提交人：函数（e）{
var data=e.getData（）；
var embedCode=data.instagram；
var script=embedCode.match（/TinyMCE在上一版本（v5）中做了一些更改-下面是Ananth Pais解决方案的更新版本：

tinymce.PluginManager.add('instagram', function(editor, url) {
    editor.ui.registry.addButton('instagram', {
        text: 'Instagram',
        onAction: function() {
            editor.windowManager.open({
                title: 'Instagram Embed',
                body: {
                    type: 'panel',
                    items: [
                        {
                            type: 'textarea',
                            height: '300px',
                            name: 'instagram',
                            label: 'Instagram embed code',
                        }
                    ],
                },
                buttons: [
                        {
                            type: 'submit',
                            name: 'submitButton',
                            text: 'Embed',
                            disabled: false,
                            primary: true,
                            align: 'start',
                        }
                ],
                onSubmit: function(e) {
                    var data = e.getData();
                    var embedCode = data.instagram;
                    var script = embedCode.match(/<script.*<\/script>/)[0];
                    var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
                    var sc = document.createElement("script");
                    sc.setAttribute("src", scriptSrc);
                    sc.setAttribute("type", "text/javascript");

                    var iframe = document.getElementById(editor_id + "_ifr");
                    var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];

                    tinyMCE.activeEditor.insertContent(data.instagram);
                    iframeHead.appendChild(sc);
                    e.close();
                }
            });
        }
    });
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
    console.log(editor);
    editor.on('init', function (args) {
        editor_id = args.target.id;
    });
}
});

tinymce.PluginManager.add（'instagram'，函数（编辑器，url）{
editor.ui.registry.addButton（'instagram'{
文字：“Instagram”，
onAction:function（）{
editor.windowManager.open({
标题：“Instagram嵌入”，
正文：{
键入：“面板”，
项目：[
{
键入：“textarea”，
高度：“300px”，
名称：“instagram”，
标签：“Instagram嵌入代码”，
}
],
},
按钮：[
{
键入：“提交”，
名称：“submitButton”，
文本：“嵌入”，
残疾人士:错,，
小学：对，
对齐：“开始”，
}
],
提交人：函数（e）{
var data=e.getData（）；
var embedCode=data.instagram；
var script=embedCode.match（/它不适用于多个instagram嵌入。请告诉我可以使用什么done@ArpitSethi我对多张instagram图片也有同样的问题，但是twitter嵌入似乎用同样的方法工作得很好