Inserting an iframe into TinyMCE with HTML contents rather than a src attribute encodes everything and breaks the contents.
Eg: inserting this via the View Source or Embed plugin:
<iframe><p>hello</p></iframe>
Will result in this when you view the Source again:
<iframe width="300" height="150" data-mce-fragment="1"><P>hello</p></iframe>
Is there any way to stop this or a setting in the init which causes this?
If anyone wonders why I would need this over using a src, it's because I'm trying to format articles for Facebooks's new Instant Article thing which requires embedded posts/tweets etc to be wrapped in a <figure><iframe>[code]</iframe></figure> format.
I figured out why this happened as I was trying to narrow down the problem by testing it out on fiddle.tinymce.com. This encoding issue didn't happen on the fiddle, so I stripped back my own init thinking it was maybe the codemirror plugin, but it turned out to be the fontawesome 2.0.6 plugin (it's now on 2.0.8 but I couldn't get that version to work so am unsure if it has changed the way it works since 2.0.6).
The plugin does a var content = parser.parseFromString(e.content, 'text/html'); on BeforeSetContent and GetContent to do some nonEditable class changes. This caused certain HTML elements to become encoded in the source code.
Long story short, I removed the parser and modified the plugin and my problem is solved!
Related
tl;dr Demo of Issue
I'm attempting to integrate Ace Editor in an iframe via React 16. I am using the react-ace component library, though this issue exists if I implement the editor natively as well.
Although everything mostly works when I wrap the editor in react-frame-component, I cannot select highlight text which makes the editor unusable. I suspect this may have to do with the fact that react-frame-component is implemented with Portals, but I'm not sure exactly what the issue is.
I've replicated the issue here. I don't think this problem exists if I loaded the component with a regular <iframe src /> from another domain.
react-frame-component keeps the code in the parent window, and adds elements into an iframe, which confuses mouse handling code in ace to add event listeners to a wrong document
adding var document = el.ownerDocument before
https://github.com/ajaxorg/ace/blob/v1.4.10/lib/ace/lib/event.js#L111 would help.
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
Finally, I have to make one line change in ckeditor.js at line number 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.
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><iframe src="http://www.lipsum.com/"></iframe></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.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
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.
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).
Problem: When a user copies a load of code from another website and pastes it into CKEditor it includes a load of inline styles which refer to the style of the content on the website it was copied from. When the pasted content is then saved and shown on my website it doesn't use my styles but the copied inline ones which conflict.
I've had a look through the CKEditor documentation, and to be honest I don't find the documentation to narrow down to what I'm looking for. There is a paste function available which removes formatting but this is an optional button in the menu, whereas most users will just post into the main large area, so its pretty worthless.
Main Question: is there a way to set CKEditor to strip formatting when pasting?
Ah, I found the answer:
// Apply editor instance settings.
CKEDITOR.config.forcePasteAsPlainText = true;
I'm writing a chrome extension where the standard popup page is used as a menu and I add a iframe at the bottom of the page to display some output. the display.html page contains the output I intend to display in the iframe appended to the page. This code inside my content script appends the iframe but it searches for a display.html page on the webserver rather than in the code packaged with the extension. Is there some way for me to get it to load my display.html page rather than one that may or may not be there on whichever page the extension is used on.
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "display.html");
ifrm.style.width = "100%";
ifrm.style.height = "20%";
document.body.appendChild(ifrm);
Updated answer
Per #Cnly's comment, please use chrome.runtime.getURL to get the URL of the embedded resource. (The original answer is extremely old, predating even manifest v2).
Original answer
I think you may want chrome.extension.getURL to get the URL of the embedded resource.