如何配置CKEditor，删除文本时保留原有HTML标签？

当然可以实现这个需求！你的核心目标是让CKEditor在清空编辑内容时，保留那些带有自定义data-x属性的空<span>标签以及<br>标签，我们只需要在现有配置基础上做一些针对性的调整就能达成。

你已经设置了CKEDITOR.dtd.$removeEmpty.span = false，这一步是对的——它告诉编辑器不要自动移除空的<span>标签，但还需要补充一些配置来覆盖编辑器的其他默认清理行为。

下面是调整后的完整配置，我会标注关键修改点：

CKEDITOR.config.height = 800;
CKEDITOR.config.allowedContent = true; // 关闭内容过滤，允许所有标签和属性
CKEDITOR.config.basicEntities = false;
CKEDITOR.config.entities_greek = false;
CKEDITOR.config.entities_latin = false;
CKEDITOR.config.entities_additional = '';
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.config.autoParagraph = false; // 禁用自动生成<p>标签，避免干扰自定义结构
CKEDITOR.config.fillEmptyBlocks = false; // 禁止自动填充空块内容（比如&nbsp;）

// 关键1：明确允许空的<span>和<br>标签不被移除
CKEDITOR.dtd.$removeEmpty.span = false;
CKEDITOR.dtd.$removeEmpty.br = false;

// 关键2：精准允许<span>标签携带自定义data-x属性
CKEDITOR.config.extraAllowedContent = 'span[data-x]'; 
// 如果你需要允许span的所有自定义属性，可以用'span(*)[*]'

// 关键3：防止编辑器在删除内容时清除标签属性
CKEDITOR.config.removeFormatAttributes = '';

var editor = CKEDITOR.replace('editor1');

// 可选额外保险：监听内容变更，确保空元素不会被意外清理
editor.on('change', function() {
    var currentData = editor.getData();
    // 这里可以根据你的需求添加自定义检查逻辑，比如确认所有目标空span都存在
    // 通常前面的配置已经足够，这一步是兜底用的
});

关键配置说明： #

• CKEDITOR.dtd.$removeEmpty：这是CKEditor的文档类型定义规则，将对应标签设为false，就会让编辑器保留该标签的空状态，不会自动删除。
• extraAllowedContent：虽然你设置了allowedContent: true，但精准指定允许的标签和属性可以避免一些边缘情况下的过滤问题，确保data-x属性不会被意外清除。
• removeFormatAttributes：默认情况下，编辑器在执行“清除格式”操作时会移除标签的属性，将其设为空字符串可以阻止这个行为，保护你的自定义data-x属性。

按照这个配置，当你在编辑区删除所有文本后，切换到源码模式就能看到那些带有data-x属性的空<span>标签和<br>标签被完整保留，完全符合你的预期效果。

内容的提问来源于stack exchange，提问作者adam.bielasty