CKEditor：保持源缩进答案

【问题标题】：CKEditor: Keep source indentationCKEditor：保持源缩进
【发布时间】：2022-01-22 01:07:27
【问题描述】：

我正在为 CKEditor 使用以下配置：

var wysiwyg = ck.replace(el[0], {
  allowedContent: true,
  protectedSource: [/\r|\n/g]
});

我正在将 HTML 源代码加载到 CKEditor 中：

<div style='font-weight: bold;'> 
  <div> 
    <div> test </div> 
  </div>
</div>

在wysiwyg.getData() 我收到：

<div style="font-weight: bold;">
<div>
<div>test</div>
</div>
</div>

如何强制 CKEditor 根据来源保持缩进？

我尝试在 protectedSource 中使用不同的正则表达式来保护 HTML >...< 之间的所有内容，例如 /(?:\>)([^<]*?)(?:\<)/g https://regex101.com/r/eV4dO0/1 但没有运气。

【问题讨论】：

我认为这可能会有所帮助docs.ckeditor.com/#!/guide/dev_output_format。从这里：stackoverflow.com/a/7579569/2321666
我使用了来自docs.ckeditor.com/#!/guide/dev_output_format 的setRules 功能，但这并不理想。我想保持源格式不变。这可能吗？
所以您不想让<div style='font-weight: bold;'>...</div>不可在所见即所得模式下可编辑，还是仅仅保留格式？

【解决方案1】：

我想保持源格式不变。这可能吗？

不，不是。内容在返回给您之前会多次通过解析器、过滤器、编写器和浏览器的 DOM。您不能期望保留在内容方面不重要的每个制表符或空格字符。请记住，CKEditor 不是代码编辑器——它是一个所见即所得的编辑器。

【讨论】：

【解决方案2】：

请将 CKeditor 的这两行添加到配置文件中

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

【讨论】：