CKEditor和iFrame / YouTube /其他嵌入式插件显示奇怪的HTML代码 [英] CKEditor and iFrame/YouTube/Other Embed Plugins Show Weird HTML Code
问题描述
我在CKEditor 4上苦苦挣扎，并试图显示YouTube视频。我已经使用标准的iFrame按钮添加了网址和嵌入代码，但是当我启动网页时，我只是获得了视频应有的空白。
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.
这是CKEditor iFrame生成的实际代码：
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;">
它看起来确实很奇怪，但是不确定从CKEditor看应该是什么样子？
It definitely looks weird but not sure if that's how it's supposed to look from CKEditor?
无论我做什么，我都无法在CKEditor创建的HTML5网页中播放YouTube视频。有人对从哪里开始寻找一些想法吗？请让我知道还有什么其他信息可以帮助您找到解决方案-谢谢！
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!
更新1：
A更多信息：
我正在构建Ruby on Rails应用程序并使用以下gem：
https ：//github.com/galetahub/ckeditor
我还将以下内容添加到config.js文件中：
I have also added the following to my config.js file:
CKEDITOR.config.allowedContent = true;
我还应该补充一点，我正在使用INLINE CKEDITOR。我刚刚尝试在他们的网站上测试完整的演示，如果我单击查看源代码按钮，那么它将正确转换为iframe代码。所以在某个地方我无法将CKEditor代码转换为HTML？
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?
更新2：
挖掘我想我已经找到了问题的原因。似乎CKEditor在做什么，但是当我保存可编辑区域的内容时，我照原样保存了代码。我缺少某种解码URIComponent或将原始 iFrame代码转换为标准HTML iFrame代码的东西？
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?
更新3：
我设法从CKEditor iFrame的所有数据重新销售中使用URI.decode，最终得到了一些更好但仍然不完美的东西：(我仍然缺少一些细节.. 。请参见下面的更新输出：
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;">
推荐答案
问题是您如何获得编辑器的价值？因为你重新安装已完全中断，或者您使用了 editor.getData（）。
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().
记住：不要直接从可编辑元素中检索HTML 。
这篇关于CKEditor和iFrame / YouTube /其他嵌入式插件显示奇怪的HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
