CKEditor 去除内联属性

Posted 2023-02-16

【中文标题】CKEditor 去除内联属性

【英文标题】：CKEditor strips inline attributes

【发布时间】：2013-03-23 03:33:03

【问题描述】：

我使用 CKEditor 已经有一段时间了，效果很好。我几乎摆脱了我遇到的任何问题，但这个我似乎无法弄清楚。当我在<p></p> 标记上向元素添加内联属性时，例如style = "color: #ff0;"，当我从所见即所得切换到源视图时，它们会被删除。没有保存或提交，并且 ckeditor 已添加到我的站点，这是我自己的脚本。关于什么会导致这种情况的任何想法。我能找到的所有搜索结果都与 Drupal 中发生的这种情况相对应，但 Drupal 似乎不是所有情况下的编辑器的问题。再次感谢！

【问题讨论】：

此外，编辑器已配置为全页模式，允许我添加<style></style>，但内联属性仍被剥离。

【参考方案1】：

我遇到了同样的问题，下面的答案解决了我的问题：

config.allowedContent = true;
config.extraAllowedContent = '*(*);**';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);**';

【讨论】：

我也试过了，我在移动应用程序中添加了 ckeditor，它在 android 设备上工作，但在 ios 设备中从 html 中剥离样式和标签。

【参考方案2】：

我遇到了同样的问题，在使用此方法时，ck 在粘贴块元素时，在块元素内（在 p 中粘贴了一些属性的 div）不仅剥离了一些属性，而且剥离了整个元素：

editor.insertHtml(html);

解决问题的方法是使用此解决方法：

editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));

【参考方案3】：

感觉就像您正在使用 Advanced Content Filter (ACF) 附带的 CKEditor 4.1+。如果是这样，您需要指定 config.allowedContent 和 configure it 才能使您的工作正常进行。你可能也对config.extraAllowedContent感兴趣。

更多详情请见this answer。

【讨论】：

链接似乎已损坏。有兴趣的人可以在docs.ckeditor.com 获得该文档。

@Nenotlep 链接似乎工作得很好。请重试并确认。

还是不行。对我来说，所有链接看起来都像“ckeditor-docs.t/#!...”，这显然失败了。 IE 和 Chrome。

链接在编辑模式下也看起来像[1]: http://ckeditor-docs.t/#!/guide/dev_advanced_content_filter。您是否与ckeditor-docs.t 在同一个网络中，或者您可能有对该地址的硬编码 DNS 解析？

@Nenotlep 哈哈！ ;） 谢谢。我没有弄明白，因为我在本地配置了文档。固定域。再次感谢。

【参考方案4】：

您好，您可以轻松停止 ACF。默认情况下你的配置是---

function ckeditor($name,$value='',$height=300)
    return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function()CKEDITOR.replace("'.addslashes($name).'",););</script>';
 

只需将其添加到大括号中即可：

allowedContent: true

现在您的配置将是：

function ckeditor($name,$value='',$height=300)
    return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function()CKEDITOR.replace("'.addslashes($name).'",allowedContent: true););</script>';

【参考方案5】：

对于正在寻找有关如何在不完全禁用 ACF 的情况下在 CKEditor 中启用附加标记的简单示例的任何人，这里有一个简短的 sn-p：

CKEDITOR.replace( 'editor1', 
    extraAllowedContent: 'style;*[id,rel](*)*'
 );

extraAllowedContent 此处启用<style> 元素，允许所有（* 是通配符）已允许的元素的两个附加属性（在方括号中），允许为它们使用任何类名(*) 并允许使用任何内联样式*

【讨论】：

你可以更进一步，允许一切（我认为）：style;*(*)[*]*;