RadEditor and Instagram Embed Not Working

[Mark]

I used to have no problem embedding an instagram post using the RadEditor. But seems like instagram changed their embed code and now it is no longer working. RadEditor seems to do something to the instagram code. I have AllowScripts="true" ContentFilters="None" RenderMode="Lightweight". Not sure what else I can do.

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/vQ-OYvoh4Q/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">For 14yrs, my cousin Ben proudly served as a Navy SEAL. Receiving two Bronze Star Medals and The Purple Heart. Willing to risk his life, so we can live ours - in freedom. Think about that for a moment... the life our families get to enjoy daily... are a direct result of very special men and women who are willing to sacrifice their own. War and combat is polarizing and I understand that. Everyone has a view. Rising above the politics of it all... I humbly say THANK YOU to our US veterans and current men and women in uniform. Love you Ben. Thank you brother - for everything. #VeteransDay #Gold #LongLiveTheBrotherhood #HolyShitYourHeadLooksBigInThisPicture</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein von therock (@therock) gepostetes Foto on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2014-11-11T15:54:07+00:00">Nov 11, 2014 at 7:54 PST</time></p></div></blockquote><script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

[Ianko]

Hi Mark,

On my end, I am able to successfully insert the provided instagram by just disabling the RemoveScripts and EncodeScripts filters:

ASP.NET

<textarea id="instagramCode">
    <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: 99.375%; width: -webkit-calc(100% - 2px); width: calc(100% - 2px);">
        <div style="padding: 8px;">
            <div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50% 0; text-align: center; width: 100%;">
                <div style="background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display: block; height: 44px; margin: 0 auto -44px; position: relative; top: -22px; width: 44px;"></div>
            </div>
            <p style="margin: 8px 0 0 0; padding: 0 4px;"><a href="https://instagram.com/p/vQ-OYvoh4Q/" style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" target="_top">For 14yrs, my cousin Ben proudly served as a Navy SEAL. Receiving two Bronze Star Medals and The Purple Heart. Willing to risk his life, so we can live ours - in freedom. Think about that for a moment... the life our families get to enjoy daily... are a direct result of very special men and women who are willing to sacrifice their own. War and combat is polarizing and I understand that. Everyone has a view. Rising above the politics of it all... I humbly say THANK YOU to our US veterans and current men and women in uniform. Love you Ben. Thank you brother - for everything. #VeteransDay #Gold #LongLiveTheBrotherhood #HolyShitYourHeadLooksBigInThisPicture</a></p>
            <p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Ein von therock (@therock) gepostetes Foto on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2014-11-11T15:54:07+00:00">Nov 11, 2014 at 7:54 PST</time></p>
        </div>
    </blockquote>
    <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
</textarea>



<telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight">
</telerik:RadEditor>


<telerik:RadButton Text="Add Hardcoded Instagram" runat="server" OnClientClicked="OnClientClicked" />

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var editor = $find("<%= RadEditor1.ClientID %>");
        var instagram = document.getElementById("instagramCode").value;
        editor.pasteHtml(instagram);
    }
</script>

C#

protected void Page_Load(object sender, EventArgs args)
{
    RadEditor1.DisableFilter(EditorFilters.RemoveScripts);
    RadEditor1.DisableFilter(EditorFilters.EncodeScripts);
}

You can try adding the above code in a page and run it to see the results.

There might be a problem to render the instagram if the iframe is not initialized. Although, this depends on the approach used to insert programmatically the HTML code. If this is the case, you can try resolving this behavior by calling  the client-side onParentNodeChanged() right after inserting the instagram code.

Regards,
Ianko
Telerik

 

 

[Mark]

The Page_Load RadEditor1.DisableFilter(EditorFilters.RemoveScripts);    RadEditor1.DisableFilter(EditorFilters.EncodeScripts); did the trick. Thanks!