如何让CKEditor精准显示数据库存储内容（保留空格与段落）

在ASP.NET Core Razor视图中，尝试将CKEditor与模型绑定结合，使用textarea配合@Html.NameFor绑定模型的Content属性，代码如下：

<textarea class="form-control mb-2" rows="10" name="@Html.NameFor(m => m.Content)"> @Model.Content</textarea>

通过以下JavaScript初始化CKEditor实例：

ClassicEditor.create(document.querySelector('textarea'));

数据库存储的内容包含\n\n（空行）和\n（换行），但这些格式无法在CKEditor中正确呈现，需要让编辑器精准保留原有空格与段落格式。

要解决这个问题，需从内容绑定修正和编辑器配置两方面入手：

1. 修正文本绑定的多余空格 #

首先移除textarea中@Model.Content前的多余空格，避免内容开头出现无效空格：

<textarea class="form-control mb-2" rows="10" name="@Html.NameFor(m => m.Content)">@Model.Content</textarea>

2. 让CKEditor识别并保留原始格式 #

方法一：手动转换纯文本换行为HTML标签 #

在Razor视图中，将数据库存储的纯文本换行转换为CKEditor可识别的HTML标签，用Html.Raw确保标签不被转义：

<textarea class="form-control mb-2" rows="10" name="@Html.NameFor(m => m.Content)">
    @Html.Raw(Model.Content.Replace("\n\n", "<p></p>").Replace("\n", "<br>"))
</textarea>

此方式将\n\n转换为段落分隔，\n转换为换行，CKEditor能直接渲染出对应格式。

方法二：配置CKEditor适配纯文本换行逻辑 #

初始化编辑器时，通过配置换行模式，让编辑器匹配纯文本的换行规则：

ClassicEditor.create(document.querySelector('textarea'), {
    enterMode: ClassicEditor.ENTER_P,    // Enter键生成<p>标签，对应数据库的\n\n
    shiftEnterMode: ClassicEditor.ENTER_BR, // Shift+Enter生成<br>标签，对应数据库的\n
    autoParagraph: false // 关闭自动生成段落，保留原始格式逻辑
});

方法三：启用Raw插件解析原始内容 #

使用CKEditor的Raw插件直接处理纯文本格式，初始化时配置启用：

ClassicEditor.create(document.querySelector('textarea'), {
    plugins: ['Essentials', 'Paragraph', 'Raw'],
    raw: {
        allowedContent: true // 允许解析原始纯文本内容
    }
});

3. 提交时的格式保留 #

提交表单时，CKEditor会自动将编辑器内容转换为HTML格式。若后端需要保持纯文本存储，可将接收的HTML内容反向转换：把<p>标签转回\n\n，<br>标签转回\n。

内容的提问来源于stack exchange，提问作者Rasik