如何修复ASP.NET Core 8.0 MVC中TinyMCE编辑器文本换行及字体异常问题

问题概述 #

在基于ASP.NET Core 8.0 MVC的产品管理项目中，使用TinyMCE编辑器处理Product的Description字段时出现两个问题：

• 编辑文本时换行错乱，提交后无法正常保存更新内容
• 向编辑器添加图片后，字体显示异常

问题1：换行错乱与内容无法正常更新的修复 #

核心原因 #

ASP.NET Core默认会对提交的HTML内容进行编码，导致TinyMCE生成的<br>、<p>等换行标签被转义，无法正确存储；同时TinyMCE的初始化配置未明确内容格式规则，导致提交内容不符合后端要求。

修复步骤 #

1. 后端模型配置
   在Product类的Description属性上添加[AllowHtml]特性，允许HTML格式内容提交：

using Microsoft.AspNetCore.Mvc;

public class Product
{
    // 其他属性...
    [AllowHtml]
    public string Description { get; set; }
}

2. 优化TinyMCE初始化配置
   调整配置，明确内容以HTML格式提交，同时启用换行相关规则：

tinymce.init({
    selector: 'textarea',
    plugins: 'anchor autolink charmap codesample emoticons lists table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align lineheight | checklist numlist bullist indent outdent | link image',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
    ],
    // 强制使用<p>标签包裹段落，避免自动转换为换行符
    forced_root_block: 'p',
    force_br_newlines: false,
    force_p_newlines: true,
    convert_newlines_to_brs: false
});

3. View层调整
   确保textarea正确绑定模型值，不对内容进行额外编码：

<div class="py-2 col-12">
    <label asp-for="Product.Description" class="ms-2 text-muted"></label>
    <textarea asp-for="Product.Description" class="form-control border-0 shadow" asp-html-content="true"></textarea>
</div>

问题2：添加图片后字体显示异常的修复 #

核心原因 #

TinyMCE插入图片时会携带默认内联样式，且编辑器内容区域的字体样式与页面全局样式冲突，导致排版错乱。

修复步骤 #

1. 添加TinyMCE内容自定义样式
   在初始化配置中指定内容区域的字体和图片样式，确保与页面样式一致：

tinymce.init({
    // 其他配置...
    content_style: `
        body { font-family: var(--bs-body-font-family); font-size: 1rem; }
        img { max-width: 100%; height: auto; display: block; margin: 1rem 0; }
        p { margin: 0.5rem 0; }
    `
});

2. 强制覆盖冲突样式
   在页面样式表中添加优先级更高的规则，确保编辑器内容字体与页面统一：

.tinymce-editor iframe body {
    font-family: var(--bs-body-font-family) !important;
    font-size: var(--bs-body-font-size) !important;
}

额外验证建议 #

• 提交表单后，检查数据库中Description字段是否正确存储HTML格式内容
• 在产品详情页渲染Description时，使用@Html.Raw()确保HTML内容正确解析：

<div class="product-description">
    @Html.Raw(Model.Product.Description)
</div>

内容的提问来源于stack exchange，提问作者Büşra Nur