CKEditor - HTML 代码在源代码视图和所见即所得视图之间切换时不断添加新行？答案

【问题标题】：CKEditor - HTML code keep adding new line very time I switch between source code view and wysiwyg view?CKEditor - HTML 代码在源代码视图和所见即所得视图之间切换时不断添加新行？
【发布时间】：2019-02-20 18:00:19
【问题描述】：

我尝试在 CKEditor 中保留我的 jinja 代码，就像在代码视图和所见即所得视图之间切换视图之后一样。

我可以通过在我的config.js 文件中添加以下行来得到这个结果

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

CKEDITOR.config.autoParagraph = false;

但是，它不适用于 HTML 代码。例如，如果jinja 代码和html 像这样混合在一起：

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

<p>Hello visitor</p>

这是Fiddle JS上的演示

在此之后，当我在 CKEditor 中从代码视图更改为所见即所得视图时，HTML 代码只增加了一个新行，另一个切换视图的另一个新行如下所示：

我找不到 HTML 代码有什么问题，我只是格式化 jinja 代码而已，我该如何解决？谢谢

【问题讨论】：

似乎 ckeditor 在
标签之前添加了一些额外的空间。
@RowfAbd，你能帮我过滤其他 html 标签和其中的属性，而不仅仅是
标签吗？谢谢

标签： html jinja2 ckeditor4.x

【解决方案1】：

在你的代码下写下这些额外的行

$("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

【讨论】：

@RowfAdb，非常感谢，它适用于 p tage，其他 html 标签怎么样，h1-h6 img table..etc 我们如何处理它？我们如何更改正则表达式以包含所有这些？谢谢
@RowfAdb，包括他们的属性类，id data-*，style..等？请帮忙补充一下，非常感谢。
@HouyNarun 仅更改正则表达式就可以删除任何空行。我已经更改了代码和小提琴。 (: