如何使用Tiny MCE编辑器嵌入Instagram帖子

Question

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

Answer 1

问题是当您将嵌入代码添加到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;
        });
    }
});

请参阅JSFiddle-https://jsfiddle.net/z3o2odhx/1/

你可以从Instagram工具栏按钮添加嵌入的html并获得渲染的html，但这也会扰乱源代码。希望这会有所帮助。

Answer 2

或者，如果您可以选择调整页面的html，您可以在该页面的某个位置添加<script async defer src="//www.instagram.com/embed.js"></script>，因为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);
}

Answer 3

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

Answer 4

https://www.tiny.cloud/docs/configure/content-filtering/#usingextended_valid_elementstoallowscriptelements

默认情况下，tinmye会阻止脚本代码。在tinymce选项上启用它们

 extended_valid_elements : 'script[src|async|defer|type|charset]'

Answer 5

您可以在设置中执行此操作，并将使用标准嵌入按钮。。。

tinymce.init({
    setup: (editor) => {
        let iframe;
        editor.on('init', function (args) {
            iframe = document.getElementById(editor.id + "_ifr");
            let iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
            let sc = document.createElement("script");
            sc.setAttribute("src", 'https://www.instagram.com/embed.js');
            sc.setAttribute("type", "text/javascript");
            iframeHead.appendChild(sc);
        });
        editor.on('Change', (e) => {
            iframe.contentWindow.instgrm.Embeds.process()
        });
    }
});