Tiny MCEエディタを使用してInstagramの投稿を埋め込む方法

Question

tinymceのソースコードにinstagram埋め込みコードをコピーしていますが、私は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を取得しますが、これは、ソースコードを台無しにすることができます。これが参考になることを願っています。