问题
I'm struggling with CKEditor 4 and trying to get a YouTube video to show up. I have used the standard iFrame button to add both url and embed code, but when I launch the webpage I just get a blank space where the video should be.
This is the actual code that CKEditor iFrame produces:
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0Bmhjf0rKe8%22%20width%3D%22480%22%20height%3D%22360%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" data-cke-saved-src="http://www.magboy.co/assets/ckeditor/plugins/fakeobjects/images/spacer.gif?t=D6IE" src="http://www.magboy.co/assets/ckeditor/plugins/fakeobjects/images/spacer.gif?t=D6IE" data-cke-real-element-type="iframe" data-cke-resizable="true" style="width:480px;height:360px;">
It definitely looks weird but not sure if that's how it's supposed to look from CKEditor?
No matter what I try, I can't get a YouTube video to play in my HTML5 webpage created from CKEditor. Anyone have some ideas on where to start looking? Please let me know what additional information could help to find a solution - thanks!
Update 1:
A little more info: I am building a Ruby on Rails app and using the following gem: https://github.com/galetahub/ckeditor
I have also added the following to my config.js file:
CKEDITOR.config.allowedContent = true;
I should also add that I'm using the INLINE CKEDITOR. I just tried testing the full demo on their website and if I click the view source button, then it's converted properly to the iframe code. So somewhere I am not able to convert this CKEditor code to HTML?
Update 2:
After doing some digging I think I have found the cause of the problem. It seems CKEditor is doing what it should, but when I save the contents of the editable areas I save the code as it is. I am missing some kind of decodeURIComponent or something to turn the "raw" iFrame code into a standard HTML iFrame code?
Update 3:
I managed to use URI.decode on all the data-cke-realelement from CKEditor iFrame and ended up with something a little better but still not perfect :( I'm still missing a couple of details ... See below for updated output:
<img class="cke_iframe" data-cke-realelement='<iframe src="http://www.nickmartin.com" width="200" height="200" scrolling="no" frameborder="0"></iframe>' data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://0.0.0.0:3000/assets/ckeditor/plugins/fakeobjects/images/spacer.gif?t=D6IE" data-cke-real-element-type="iframe" data-cke-resizable="true" style="width:200px;height:200px;">
回答1:
The question is how do you get value of the editor? Because either your installation is completely broken or you use something else instead editor.getData().
Remember: DO NOT retrieve HTML directly from the editable element.
来源：https://stackoverflow.com/questions/19383748/ckeditor-and-iframe-youtube-other-embed-plugins-show-weird-html-code