ckeditor 在编辑器中添加 <iframe> 标签

Question

我在 drupal 7 站点中使用 ckeditor。我想将 iframe 标签放入编辑器中。目前当我们将 iframe 放入 ckeditor 时会发生什么。

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

它将 iframe 标签转换为具有某些特殊属性的 img 标签和 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">

我不想要。我想让 ckeditor 打印准确的 iframe 标签，而不是像这样的 img 标签。

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

这样，如果我想在 iframe 中执行任务，我就可以在编辑器中执行。

提前致谢

加法2：

我需要 iframe 可以在编辑器中运行。它也不应该在节点添加或编辑页面上将 iframe 转换为 img。

应该是这样的

不是这样的

Answer 1

问题解决：

在当前最新版本的 CKEditor (4.5.8) 中有一个缩小的文件 ckeditor.js。为了在编辑模式下启用 iframe，您必须更改该文件中的下一行：

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

进入：

return (b)

出于安全原因，该选项在默认情况下处于禁用状态，您可以通过这种方式覆盖它。这是这个特定问题的解决方案。如果您在 drupal 7 的 CKEditor 中遇到 iframe 问题，以下是一些可能的问题解决方案。

加法：

继续：

admin/config/content/formats/filtered_html（假设您使用该文本格式）并在过滤器设置中添加 <iframe>（在允许的 HTML 标签中）。

现在，当您在 ckeditor 中 post iframe 时，请确保您不会 post 它位于任何其他标签内。

例如：

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

那行不通。

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

那行得通

最好的方法是在 ckeditor 中继续 "source" 模式，然后在你想要的地方插入 iframe。

加法2：

根据您的评论，我假设您在在线 ckeditor 上尝试了所有这些？您在那里看不到最终结果（节点页面视图），因为仅显示编辑视图（这是临时的）。

Ckeditor 会根据设置（不仅仅是文本格式的基本设置）转换您的所有内容。例如，ckeditor 转换实体名称或实体编号中的一些 HTML 保留字符，因为 ckeditor 本身使用 HTML 在编辑模式下向您显示预览。

例如：

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

转换为：

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

您可以看到“<”在 "<" 中转换，“>”在 > 中转换。浏览器需要在源代码中添加“< >”才能正确加载 iframe。所以解决方案是在 ckeditor 中使用 "source" 选项。

所以我再重复一遍。在ckeditor编辑模式下输入文字、图片和所有你需要的内容。当你想添加 iframe 时，你进入源代码模式并将其放入内容中（这样 ckeditor 将不会转换 HTML 保留字符，或者可能是你的 url 中的其他字符）。

当然，您可以在那里编辑您的 iframe 并设置格式大小、边框、滚动等...保存您的内容后，您应该会看到 iframe 已正确加载。在你的情况下：

加法3：

出于安全原因，为了防止用户破坏网站布局 and/or 避免 post 无效 HTML 这种可能性已被禁用（例如 iframe 在编辑器中工作）。如果您非常不愿意实现，那么您总是可以使用旧模块，因为在新模块中不起作用。

在新库中有一个选项你可以试试：

admin/config/content/ckeditor

在那里您可以编辑完整配置文件，在高级内容过滤器下您可以尝试禁用高级内容过滤器。之后刷新缓存。如果那不起作用，请使用旧模块。

去禁用模块 ckeditor
安装wysiwyg
安装旧的ckeditor库（只需复制/sites/all/libraries中的旧库）
您需要 CKEditor 3.3.1 及更早版本
继续admin/config/content/wysiwyg和select那个图书馆

当你这样做时，你应该考虑所有的风险。希望这个 post 对其他人也有帮助。干杯。

Answer 2

最后，我必须在 ckeditor.js 中的第 8194 行更改一行：

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

到

return p;

所以它没有为 iframe 创建 FakeParser。当我将 iframe 置于编辑模式时，我看到的是 iframe 而不是图像。这是我用于此功能的一个小技巧。

感谢 Darko 在这方面的帮助。

ckeditor 在编辑器中添加 <iframe> 标签

ckeditor add <iframe> tag in editor

iframe

drupal

ckeditor