Skip to content

Latest commit

 

History

History
39 lines (29 loc) · 1.73 KB

TestCase.md

File metadata and controls

39 lines (29 loc) · 1.73 KB

Test Case

A test case used with this library is displaying embedded content. Also the reason why I created this library, Hopefully it might help others.

More specifically, the test case is about showing Embedded content generated by the Froala Editor. This editor uses a third-party embed provider, embed.ly. Here are its usage docs: embed.ly

So the test case involves previewing the following embedded code, generated by the editor:

<div class="fr-embedly " data-original-embed="<a href='https://youtu.be/t-645fMmuD0' data-card-branding='0' class='embedly-card'></a>" style="height: 370px;">
	<a href="https://youtu.be/t-645fMmuD0" data-card-branding="0" class="embedly-card"></a>
</div>

This code is clearly not an Iframe, so we need to execute some JS code to convert this code to its embedded counterpart. This is done by using the following Embed.ly script, from their docs.

<script>
  (function(w, d){
   var id='embedly-platform', n = 'script';
   if (!d.getElementById(id)){
     w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
     var e = d.createElement(n); e.id = id; e.async=1;
     e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
     var s = d.getElementsByTagName(n)[0];
     s.parentNode.insertBefore(e, s);
   }
  })(window, document);
</script>

Just pass this two things to the library and you are all set. The example app is based on this test case. And the result! A beautifully rendered embed.

screenshot preview