Prevent Jinja code from wrapping into one single line in CKEditor 4?

Question

I'm using CKEditor 4.x for the purpose of jinja html template code. Therefore, I tried to configure it to support jinja language in source view of CKEditor.

With this concern, I would like editor not to wrap my jinja code as a single line. For example, if I write below in source view of editor:

{% if name=='hello' %}
    {{ 'hello' }} 
{%else%}
    {{ 'what is your name?' }} 
{% endif %}

Then I switch wysiwg view and back to source code again, I would like it to above code as the same.

However, currently it wraps above code as a single line like this:

{% if name=='hello' %}{{ 'hello' }} {%else%} {{ 'what is your name?' }} {% endif %}

Here is inside my current config.js file:

/**
 * @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';
    // 1. Codemirror
       config.codemirror = {
         // Define the language specific mode 'htmlmixed' for html  including (css, xml, javascript), 'application/x-httpd-php' for php mode including html, or 'text/javascript' for using java script only 
        mode: 'django',

    };

    config.toolbar = 'Basic';


};

/* 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 {# #}

CKEDITOR.config.autoParagraph = false;

As I hoped there must be a configuration we can set to archive the above effect in CKEditor configuration settings. Please kindly help me to archive that. Thanks.

Added:

I have tested the same case with summernote editor, it works as I wish here, yet for some reason I prefer CKEditor rather that summernote. I'm not clear this configuration set in codemirror or in editor itself. Thanks.

Answer 1

Thanks a lot, after search around hours, I managed to find a solution myself. It is quite simple. To archive the above result I tried adding this in my config.js file and it working as I wish:

CKEDITOR.config.protectedSource = [/\r|\n/g];

Hopefully, this is helpful for somebody meeting issue and finding solution as me. Thanks.