CKEditor - HTML code keep adding new line very time I switch between source code view and wysiwyg view?

Question

I tried to keep my jinja code in CKEditor as it was after I toggle the view between code view and WYSIWYG view.

And I could get this result by adding below line in my config.js file

CKEDITOR.config.protectedSource.push(/\r|\n/g);

CKEDITOR.config.autoParagraph = false;

However, it does not work well for HTML code. For instance, if jinja code and html mixed together like this:

{% if name=='bob' %}
    {{'hello bob'}}
{%else%}
    {{ 'hello ' + name }} 
{% endif %}

<p>Hello visitor</p>

Here is Demo on Fiddle JS

After this, when I change from code view to wyiwyg view in CKEditor, the HTML code just increase by one new line, and another new line for another toggle view as shown below:

I can't find what is wrong with HTML code, I just what to format jinja code only, how can I fix it? Thanks

Oxytocic

It seems somehow ckeditor adds some extra space before the <p> tag. – Phipps

@RowfAbd, could you please help me filter other html tags and attributes inside it not only <p> tags? Thanks – Oxytocic

Answer 1

Write these additional lines under your code

$("body").on("click", ".cke_button__source", ()=>{
//   if(CKEDITOR.instances.editor1.mode==="source"){
     let vtk = CKEDITOR.instances.editor1.getData();
    // vtk = vtk.replace(/\n<p>/gm, "<p>");
     vtk = vtk.replace(/^\s*[\r\n]/gm, "");
     $(".cke_source").val(vtk)
  // }
})

Here is jsFiddle

Phipps

@RowfAdb, thanks very much, it works for p tage, how about other html tags, h1-h6 img table..etc how can we handle it? how regEx we can change to include all of those? Thanks – Oxytocic

@RowfAdb, including their attributes class, id data-*, style.. etc? Please kindly help add on this, thanks very much. – Oxytocic

@HouyNarun Changing only the RegEx it is possible to remove any blank line. I have changed the code and fiddle. (: – Phipps