WordPress CF7富文本编辑器首次提交验证失效，二次提交才生效

Contact Form 7 （简称CF7）的默认字段验证绑定逻辑会在页面DOM加载完成后立即执行，而富文本编辑器（WordPress默认集成TinyMCE内核）为DOM加载完成后异步初始化的组件，初始化时会隐藏原生textarea字段，生成独立的富文本编辑区，导致CF7初始化验证规则时无法正确关联富文本编辑器的实际输入内容，首次提交时无法读取富文本输入值触发验证；第二次提交时页面已完成富文本初始化状态同步，因此验证可以正常触发。

• 方案1：使用CF7官方适配的富文本字段
  直接在CF7表单编辑页添加[tinymce your-rich-field-name]短代码生成富文本字段，该字段已做好初始化时机与CF7验证逻辑的适配，无需额外修改代码即可正常触发验证。
• 方案2：手动添加内容同步逻辑适配自定义富文本字段
  若使用第三方扩展的富文本字段，可在主题functions.php或自定义JS文件中添加如下代码，监听富文本初始化完成事件，手动将富文本内容同步回原textarea，同时触发CF7字段验证绑定刷新：

// 监听TinyMCE初始化与内容变更事件，实时同步内容到原生textarea
tinymce.init({
  setup: function (editor) {
    editor.on('init change', function () {
      editor.save();
    });
  }
});

// 表单提交前兜底同步所有富文本内容
document.addEventListener('wpcf7submit', function (event) {
  if (typeof tinymce !== 'undefined') {
    tinymce.triggerSave();
  }
}, false);

若使用非TinyMCE内核的富文本编辑器，将上述代码中的内容同步API替换为对应编辑器的保存方法即可。

• 方案3：延后CF7验证初始化时机
  若以上方案不生效，可将CF7初始化逻辑延后到富文本编辑器加载完成后执行，在主题自定义JS中添加如下代码：

// 高优先级覆盖CF7默认初始化逻辑，阻止DOM加载完成后立即初始化
document.addEventListener('DOMContentLoaded', function (event) {
  if (typeof wpcf7 !== 'undefined') {
    wpcf7.initForm = function(){};
  }
}, 9);

// 页面所有资源加载完成后，等待富文本初始化完成再初始化CF7
window.addEventListener('load', function () {
  if (typeof wpcf7 !== 'undefined' && typeof tinymce !== 'undefined') {
    let tinymceCheck = setInterval(function(){
      // 确认所有TinyMCE实例已完成初始化
      if(tinymce.editors.length > 0 && tinymce.editors.every(editor => editor.initialized)){
        clearInterval(tinymceCheck);
        // 遍历初始化所有CF7表单
        document.querySelectorAll('.wpcf7 > form').forEach(form => wpcf7.init(form));
      }
    }, 100);
  }
});

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