CKEditor 5用<div>替代<textarea>后，后端接收值始终为null的问题

正确实现步骤 #

• 保留隐藏输入框并绑定asp-for：这是后端能获取值的核心，div不属于表单提交字段，无法直接被后端识别。

  <form method="post">
      <!-- 绑定模型属性的隐藏字段，用于提交时传递值 -->
      <input type="hidden" asp-for="ProjectProduct.MiddleDescription_en" id="hidden-middle-desc-en" />
      <!-- CKEditor 5的div容器 -->
      <div id="editor-middle-desc-en"></div>
      <button type="submit">提交</button>
  </form>
  

• 用CKEditor官方事件同步内容到隐藏字段：不要直接监听div的原生事件，改用CKEditor提供的change:data事件同步内容，规避安全检测错误。

  // 以DecoupledEditor为例初始化自定义CKEditor
  DecoupledEditor
      .create(document.querySelector('#editor-middle-desc-en'), {
          // 你的编辑器配置项，比如工具栏
          toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList']
      })
      .then(editor => {
          // 监听编辑器内容变更事件
          editor.model.document.on('change:data', () => {
              // 将编辑器的HTML内容同步到隐藏字段
              document.getElementById('hidden-middle-desc-en').value = editor.getData();
          });
  
          // 编辑场景下：用隐藏字段的初始值填充编辑器
          editor.setData(document.getElementById('hidden-middle-desc-en').value);
      })
      .catch(error => {
          console.error(error);
      });
  

• 后端允许接收HTML内容（可选）：如果编辑器内容包含HTML标签，给模型属性添加[AllowHtml]特性，避免ASP.NET Core的请求验证拦截：

  using Microsoft.AspNetCore.Mvc;
  
  public class ProjectProduct
  {
      [AllowHtml]
      public string MiddleDescription_en { get; set; }
  }
  

问题根源说明 #

• 直接用div绑定asp-for：ASP.NET Core的Tag Helper仅处理input、textarea这类标准表单控件，div不会被纳入表单提交的参数列表，所以后端接收值为null。
• 监听div的oninput事件：CKEditor会对编辑器DOM做安全封装，直接操作div的原生事件会触发它的安全检测机制，导致domconverter-unsafe-attribute-detected错误，必须通过官方API交互。

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