如何防止CKEditor 4将Jinja代码合并为单行？

我明白你遇到的痛点——切换CKEditor的视图后，Jinja代码的空格和换行被自动合并，破坏了模板的可读性。结合你的现有配置，我们可以通过调整编辑器核心设置和CodeMirror插件配置来解决这个问题，以下是具体方案：

1. 完善Jinja标签的保护规则 #

首先确保所有Jinja语法标签都被加入protectedSource，包括你之前注释掉的{{ }}。这一步会告诉CKEditor不要解析或修改这些Jinja代码块，避免视图切换时的格式破坏：

// 替换原有的protectedSource配置
CKEDITOR.config.protectedSource.push(/\{\%[\s\S]*?\%\}/g); // Jinja {% %}
CKEDITOR.config.protectedSource.push(/\{\{[\s\S]*?\}\}/g); // Jinja {{ }}
CKEDITOR.config.protectedSource.push(/\{\#[\s\S]*?\#\}/g); // Jinja {# #}

2. 关闭CKEditor的自动格式化行为 #

添加以下配置，禁用编辑器默认的HTML压缩和格式清理逻辑：

CKEDITOR.editorConfig = function( config ) {
    // ... 保留你原有的配置项 ...
    
    // 禁用自动段落包装（你已设置，保留即可）
    config.autoParagraph = false;
    // 禁止编辑器自动填充空区块的内容
    config.fillEmptyBlocks = false;
    // 保留空段落元素，避免Jinja标签被误删
    config.preserveEmptyParagraph = true;
    // 允许所有自定义内容，不过滤Jinja相关标签
    config.extraAllowedContent = '*(*);*{*}';
    // 设置回车和换行模式，避免自动添加<br>或<p>破坏格式
    config.enterMode = CKEDITOR.ENTER_BR;
    config.shiftEnterMode = CKEDITOR.ENTER_P;
};

3. 配置CodeMirror插件保留源码格式 #

针对你使用的CodeMirror插件，增加以下配置，确保源码视图中的缩进、换行和空格被完整保留：

config.codemirror = {
    mode: 'django',
    // 保留缩进格式
    preserveIndent: true,
    // 显示行号（可选，提升源码可读性）
    lineNumbers: true,
    // 禁止自动格式化粘贴的内容
    autoFormatOnPaste: false,
    // 禁止删除时自动调整格式
    autoFormatOnDelete: false,
    // 使用Tab键缩进（可选，匹配你的代码风格）
    indentWithTabs: true,
    // 设置缩进宽度（可选）
    indentUnit: 4
};

修改后的完整config.js示例 #

/**
 * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */
CKEDITOR.editorConfig = function( config ) {
 // Define changes to default configuration here. For example:
 config.removePlugins = 'easyimage, cloudservices';
 config.height = 800;
 config.toolbarCanCollapse = true;
 /* skin */
 config.skin = 'office2013';
 config.extraPlugins = 'codemirror,placeholder,textindent,floating-tools,textselection,tableresizerowandcolumn,quicktable';
 // Codemirror配置
 config.codemirror = {
 mode: 'django',
 preserveIndent: true,
 lineNumbers: true,
 autoFormatOnPaste: false,
 autoFormatOnDelete: false,
 indentWithTabs: true,
 indentUnit: 4
 };
 config.toolbar = 'Basic';
 
 // 新增格式保护配置
 config.autoParagraph = false;
 config.fillEmptyBlocks = false;
 config.preserveEmptyParagraph = true;
 config.extraAllowedContent = '*(*);*{*}';
 config.enterMode = CKEDITOR.ENTER_BR;
 config.shiftEnterMode = CKEDITOR.ENTER_P;
};
/* Protected code in editor */
CKEDITOR.config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP
CKEDITOR.config.protectedSource.push(/\{\%[\s\S]*?\%\}/g); // Jinja {% %}
CKEDITOR.config.protectedSource.push(/\{\{[\s\S]*?\}\}/g); // Jinja {{ }}
CKEDITOR.config.protectedSource.push(/\{\#[\s\S]*?\#\}/g); // Jinja {# #}

验证效果 #

配置完成后重新加载编辑器：

• 在源码视图输入带空格和换行的Jinja代码
• 切换到所见即所得视图再返回源码视图
• 检查代码是否保持原始的空格和换行格式

这个方案同时调整了CKEditor核心的格式化规则和CodeMirror的源码编辑行为，应该能达到你想要的效果，和Summernote的表现一致。

内容的提问来源于stack exchange，提问作者Houy Narun