HTML表单中如何让CKEditor继承textarea的is-invalid验证类？

要实现把textarea上的is-invalid类转移到CKEditor对应的容器中，你可以通过客户端JavaScript来处理——因为PHP是在服务端完成的验证和类添加，我们需要在页面加载/CKEditor初始化完成后调整DOM类的归属。

方法1：利用CKEditor的初始化事件（推荐） #

这个方法能确保CKEditor已经完全加载，容器元素已经存在，避免找不到DOM节点的问题：

// 针对CKEditor 4的写法
CKEDITOR.on('instanceReady', function(event) {
  const editor = event.editor;
  const textareaElement = editor.element.$; // 获取绑定的原生textarea元素

  // 检查textarea是否带有is-invalid类
  if (textareaElement.classList.contains('is-invalid')) {
    // 获取CKEditor对应的容器（ID规则是cke_ + 编辑器名称/textarea的ID）
    const editorContainer = document.getElementById(`cke_${editor.name}`);
    
    if (editorContainer) {
      // 给容器添加is-invalid类
      editorContainer.classList.add('is-invalid');
      // 移除textarea上的is-invalid类
      textareaElement.classList.remove('is-invalid');
    }
  }
});

方法2：页面加载完成后直接处理DOM #

如果你的页面中CKEditor初始化速度很快，也可以在DOM加载完成后直接操作：

document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带有is-invalid的form-control textarea
  const invalidTextareas = document.querySelectorAll('textarea.form-control.is-invalid');
  
  invalidTextareas.forEach(textarea => {
    const editorContainerId = `cke_${textarea.id}`;
    const editorContainer = document.getElementById(editorContainerId);
    
    if (editorContainer) {
      editorContainer.classList.add('is-invalid');
      textarea.classList.remove('is-invalid');
    }
  });
});

为什么要这么做？ #

CKEditor会把原始的textarea隐藏（就是你看到的visibility: hidden; display: none;），所以即使textarea带有is-invalid类，用户也看不到错误样式。而CKEditor的容器是实际显示在页面上的元素，把错误类转移到这里才能让Bootstrap的无效样式（比如红色边框）正确显示出来。

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