Angular中使用CKEditor4时如何正确格式化渲染数据保留换行符

架构老林

2026-10-1

CKEditor4 忽略换行符问题解决方法

出现这个问题的核心原因是CKEditor4作为富文本编辑器，默认解析的是HTML格式内容，纯文本中的\r、\n属于纯文本换行符，不会被富文本渲染引擎识别为换行，可以通过以下方案解决：

方案1：赋值前转换纯文本换行符为HTML换行标签
在给CKEditor赋值前，先把所有换行符替换为<br />标签即可，示例代码：

// 原始待赋值文本
const rawContent = 'Hi Tata,\r\n\r\nGreetings from Flitpay.\r\n\r\nI am aman,';
// 全局替换所有格式的换行符为br标签
const formattedContent = rawContent.replace(/(?:\r\n|\r|\n)/g, '<br />');
// 赋值给CKEditor实例，双向绑定场景直接替换绑定变量即可
this.ckeditorInstance.setData(formattedContent);

方案2：修改CKEditor配置适配纯文本换行
如果你需要编辑器默认支持识别纯文本换行，可以在初始化配置中添加如下参数：
```
public ckeditorConfig = {
  enterMode: CKEDITOR.ENTER_BR,
  shiftEnterMode: CKEDITOR.ENTER_BR,
  forcePasteAsPlainText: true,
  allowedContent: true
};
```
该配置同时会适配用户手动粘贴纯文本的换行识别场景。

方案3：按段落转换（更符合富文本格式规范）
如果需要保留段落结构，可以把连续两次换行转换为段落标签包裹，单次换行转换为<br />：

const rawContent = 'Hi Tata,\r\n\r\nGreetings from Flitpay.\r\n\r\nI am aman,';
const formattedContent = rawContent
  .split(/\r?\n\r?\n/)
  .map(paragraph => `<p>${paragraph.replace(/\r?\n/g, '<br />')}</p>`)
  .join('');