CKEditor自动删除空的span元素

Question

我正在使用ckeditor，遇到一个非常奇怪的问题。

它自动删除空的 <span>，例如

 <span class="new-class"></span>

自动删除。

我已经搜索了最后两天，但没有成功。我尝试将以下代码放入

config.js

CKEDITOR.config.allowedContent = true;

但是没有成功。

我还在使用ckeditor的html代码中添加了以下代码，但是没有成功。

   <script>     
var editor = CKEDITOR.replace( 'editor1', {
allowedContent: true,
    } );
   </script>    

谢谢

- air

---

那么，你是在问如何允许空的跨度，还是其他什么问题？ - Aaron Kurtzhals

http://dev.ckeditor.com/ticket/8782 - Daniel

是的，它是我的设计的一部分，我也在使用最新版本的ckeditor。 - air

请建议将用户2826162标记为正确答案，因为Reinmar只是重新链接。 - Daniel

可能是CKEditor剥离<i>标记的重复问题。 - azerafati

Answer 1

我正在使用Django CMS 3，CKEditor 4.3，我在使用Twitter Bootstrap glyphicon时遇到了相同的问题。 请看：http://ckeditor.com/forums/Support/Prevent-removal-of-empty-span-tags#forum-topic-top。 为了允许空的span标签，我已经在 ckeditor/config.js 的末尾添加了以下内容。

CKEDITOR.dtd.$removeEmpty.span = 0;

- Patrick

---

我已经在 config.js 中添加了那行代码，清除了缓存，但 Drupal 似乎没有看到那个文件，因为什么都没有发生。 - maciek

这个对我有效，结合 allowedContent = true 使用。 - nuander

Answer 2

我遇到了与这个问题相同的帖子，想分享我的解决方法。我不想让 CKEditor 删除任何空元素。请在您的 config.js 文件底部添加以下内容：

我发现了一个有相同问题的讨论串，于是想发布我的解决方案。我不希望 CKEditor 删除任何空白元素。请在您的 config.js 文件底部添加以下内容：

    $.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
        CKEDITOR.dtd.$removeEmpty[i] = false;
    });

- Jonathan Carter

---

在v4.4.7上比其他按标签方法更好用。似乎在加载其他指令之前就可以在config.js上运行。我认为这应该是被接受的答案，因为它比其他SO链接中给出的答案更灵活。谢谢。 - dhaupin

这应该是4.4.+的答案，因为CKEDITOR.dtd.$removeEmpty直接在HTML解析阶段使用，可以避免标签被删除。 - Grasshopper

Answer 3

您会在这个问题中找到两个有效的答案：CKEditor去除标签 一个说如果您希望在编辑器中看到它们，那么无法保留它们，另一个说您可以防止删除它们，但是您将隐藏它们。

- Reinmar

---

太好了。在这里+1，以及在链接的答案上+1。 - m.qayyum

Answer 4

对我有效的唯一选项是添加：

config.extraAllowedContent = 'span(*)';

在 config.js 文件中，内部包含：

CKEDITOR.editorConfig = function( config ) {

区块

''（星号）允许span标签内的所有类，如果只想允许选定的类名，请用逗号分隔它们，取代''。

- Picard

---

如果您需要在整个网站上修复问题，这是更好的方法。 - Rahatur

Answer 5

这很烦人，但在浏览了许多页面并得到帮助后，我将整合我发现的有效解决方法;

(我正在使用 CKEditor 4.4.1 版本和 inlinesave 编辑器插件，但这个方法适用于任何插件)

在 core/filter.js 文件中

修改:

var allowedContent = editor.config.allowedContent;

to:

var allowedContent = true;

(不建议这样做，所以请确保您检查用户正在保存的内容；-))

接着，在 core/dtd.js 文件中，靠近底部有一个 $removeEmpty:，其中包含一个它选择忽略的元素列表，如果将它们设置为1，则会忽略这些元素。找到 span 并将其从 1 设置为 0 (span: 0)。

如果在 config.js 中的 config.plugins 添加了 "glyphicons" 插件，则应该能够添加它们，在编辑器中看到它们，并且一旦保存，它们仍然存在！:-)

希望这可以帮助您。

- skh

---

这两个东西结合起来对我很有用。虽然我没有黑客DTD文件，而是使用了CKEDITOR.dtd.$removeEmpty.span = 0。 - nuander

Answer 6

这里有两个问题：

1）<span>元素被舍弃了，因为它们不是允许的内容。

2）<span>元素被舍弃了，因为它们是空的。

要解决这个问题，你不仅需要拥有非空的<span>元素，还需要在你的配置文件中添加config.extraAllowedContent = 'span(selector1,selector2,...,selectorN)'。

顺便说一句，我建议不要使用config.allowedContent，因为那会允许几乎所有东西。

- progfan