Question

当我尝试将数据库中的值加载到CKEditor可编辑的字段时，它会从中删除iframe标记。

例如，我将以下html发送到屏幕上打印出来：

<div class="videodetector">
    <iframe src="https://www.youtube.com/embed/eSYKJ8WQ508?autohide=1&controls=1&showinfo=0" 
        frameborder="0" allowfullscreen=""></iframe>
</div>

但是当我看到打印出的html时，我看到的是这样的东西：

<div class="videodetector"><img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FeSYKJ8WQ508%3Fautohide%3D1%26amp%3Bcontrols%3D1%26amp%3Bshowinfo%3D0%22%20frameborder%3D%220%22%20allowfullscreen%3D%22%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>

似乎将这个图像标记注入到iframe的位置。

我在网上研究了这个，我尝试将以下代码添加到config.js中，但它对我没有任何影响：

config.extraAllowedContent = 'iframe(*)';
config.allowedContent = true;

注意：如果我在CKEditor无法编辑的div中打印出来，那么iframe会加载而不会出现任何问题。

Answer 1

我这样做：

CKEDITOR.on('instanceReady', function () {
 var CKEIframes = $('.cke_iframe');
 var CKEIframesL = CKEIframes.length;
 for (i = 0; i <CKEIframesL; i ++ ) {
  $(CKEIframes[i]).replaceWith(decodeURIComponent($(CKEIframes[i]).data('cke-realelement')));
}
});

Answer 2

我需要在文本中添加许多HTML标记，包括iframe。所以我使用这些设置，它们可以正常工作：

'extraAllowedContent'=>'*(*)',
'allowedContent'=>true

CKEditor删除IFrame

2 个答案: