iFrame does not work for PDFs, source disappears after being toggled
Yes, its kind of a twofer, but I have literally never had iFrames work. Ever in the past 2 years. I can link a PDF and hit 'print preview' and it looks marvelous, wonderful. I hit post, and I get the HTML Source Code, <iFrame etc etc etc>, but I get it as plaintext.
Now, fine, I can just copy the code from an existing iFrame off of someone/place else on this same website and replace the src with my PDF, easy. I hit Source, I paste everything in, looks great in print preview. I post. Nothing shows at all, blank post. I try again, but this time I go back into Source to double check. Nothing, it has erased everything I put into it, or more likely never bothered to save it, as I have had a lot of things just 'disappear' after I view them in Source. I have tried this with Firefox, IE, and Chrome, even on different computers. Always the same results.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
It must have something to do with CKEditor doing its very best to destroy every piece of HTML on the page, here is what I get when I load the page and the autosave has 'discrepencies'
<di<div id="post-content"><img class="cke_iframe" data-cke-realelement="%3Ciframe%20frameborder%3D%220%22%20scrolling%3D%22yes%22%20src%3D%22https%3A%2F%2Fdb4sgowjqfwig.cloudfront.net%2Fcampaigns%2F123456%2Fassets%2F123456%2FEXAMPLEPDFs.pdf%3F12345678%22%20type%3D%22application%2Fpdf%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" data-cke-real-element-type="iframe" data-cke-resizable="true"></div>
Compare this to what I saved on my end:
<div id="post-content"><iframe frameborder="0" scrolling="yes" src="https://db4sgowjqfwig.cloudfront.net/campaigns/12345/assets/12345/EXAMPLE.pdf?12345678"; type="application/pdf"></iframe></div>
Hi friend, I'm so sorry to hear the iframes aren't working! I've sent this information to our Devs and we'll get back to you as soon as I can. @konquerer
Obsidian Portal Support Druid | [email protected]
@Konquerer
Thanks for bringing this up!
To make this work with CkEditor, you need to click Source, and then put in something like this:
It won't show the PDF in the CkEditor Preview, but when Saved, that div will be converted to an iframe with the PDF.
That code is very similar to the code that's generated by the "Media/PDF Embed" and "Image/PDF Embed" buttons, which is:
But in the first one there is an <img /> tag inside the <a> tag. This is because CkEditor removes empty <a> tags, assuming that you meant to delete them. So, CkEditor will save this second HTML, and the iframe/PDF will show, but when you go to Edit the page, CkEditor will remove the empty <a> tag at that point, and reSaving will then have deleted the url of the PDF.
OP strips out iframes that are directly entered as HTML for security reasons, so you won't be able to copy/paste iframes from someone else's "Saved" version of their page.
If you find yourself using Source on CkEditor a lot, you might consider switching to using the Textile Editor. It handles HTML directly, and it doesn't try to clean it up for you like CkEditor is doing.
Obsidian Portal Developer