如何使用 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 包含。

如果你想选择性地包含它，你也可以在那个页面的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]'