ckeditor add <iframe> tag in editor

Question

I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor. Currently what happen when we put iframe in ckeditor.

<iframe src="http://www.lipsum.com/"></iframe>

It convert that iframe tag with a img tag with some special attribute and URL.

<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">

Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.

<iframe src="http://www.lipsum.com/"></iframe>

So that If I want to perform a task in iframe so I can do that inside the editor.

Thank you in advance

Addition 2:

I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.

It should like this

Not like this

Answer 1

Problem solution:

In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:

return a.createFakeParserElement(b,"cke_iframe","iframe",!0)

into:

return (b)

Due to security reasons that option is by default disabled and this is the way how you can override it. That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.

Addition:

Go on:

admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).

When you post iframe in ckeditor now make sure you don't post it inside any other tag.

ex.:

<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>

that will not work.

<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>

that will work

Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.

Addition 2:

From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).

Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.

ex:

<iframe src="http://www.lipsum.com/"></iframe>

is converted in:

<p>&lt;iframe src="http://www.lipsum.com/"&gt;&lt;/iframe&gt;</p>

You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.

So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).

Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:

Addition 3:

Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.

In new library there is an option you can try:

admin/config/content/ckeditor 

There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.

1. Go disable module ckeditor
2. Install wysiwyg
3. Install old ckeditor library (just copy old library in /sites/all/libraries )
4. You need CKEditor 3.3.1 and older
5. Go on admin/config/content/wysiwyg and select that library

When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.

Answer 2

Finally, I have to make one line change in ckeditor.js file of library for this. I made following changes in that file: -

Line No. 8194: -

return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);

To

return p;

So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that. It is a little hack I used for this functionality.

Thank you Darko for help on this.