接入CKEditor的表单首次提交验证提示为空、第二次才生效如何解决？

问题原因 #

你遇到的需两次提交才生效、原生required属性失效的问题，都是CKEditor的渲染机制导致的：
CKEditor初始化后会隐藏页面上的原生textarea，用独立的DOM结构渲染富文本编辑区域，默认不会实时把编辑内容同步回原生textarea，只有第一次触发提交事件后才会执行一次同步操作，因此第一次校验时读取的textarea.value还是初始空值，第二次校验才能读到同步后的正确内容。

解决方案 #

方案1：校验前主动同步内容（最推荐） #

修改你的validateForm校验函数，在校验字段内容前先调用CKEditor的API把最新编辑内容同步到原生textarea，同时添加trim方法过滤全空白的无效内容，修改后的代码如下：

function validateForm() {
  // 遍历所有CKEditor实例，将最新内容同步到对应的textarea
  for (const instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].updateElement();
  }
  const x = document.forms["myForm"]["subject"].value;
  const y = document.forms["myForm"]["html_email"].value;
  if (x.trim() === "") {
    alert("你还没有填写邮件主题");
    return false;
  }
  if (y.trim() === "") {
    alert("你还没有编辑邮件正文");
    return false;
  }
}

该方案不需要修改其他配置，改完即可实现单次提交正常校验的效果，同时也会让原生的required属性恢复正常。

方案2：配置CKEditor实时同步内容 #

如果需要在编辑过程中随时读取textarea的最新内容，可以给CKEditor添加全局的内容变更监听，每次编辑内容更新自动同步到textarea：

// 该代码放在CKEditor初始化逻辑之后执行即可
CKEDITOR.on('instanceCreated', function (event) {
  const editor = event.editor;
  // 监听内容变更事件，实时同步内容到textarea
  editor.on('change', function () {
    editor.updateElement();
  });
});

配置完成后不需要修改原有校验函数，即可正常生效。

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