在React框架中如何设置CKEditor 5禁用状态下的编辑器背景颜色

解决方案 #

你之前的写法逻辑有误：CKEditor 5的.ck-read-only类会直接添加在.ck-editor__editable元素自身，而非其子元素，因此完全不需要使用兼容性不好的:has()选择器，直接修改CSS即可实现需求。

方案1：仅修改CSS（推荐，无额外代码侵入） #

直接调整选择器匹配自带的只读类即可：

/* 编辑器启用状态背景 */
.ck .ck-editor__main > .ck-editor__editable {
  background: #FFF;
}
/* 编辑器禁用/只读状态背景 */
.ck .ck-editor__main > .ck-editor__editable.ck-read-only {
  background: #C3C3C3;
}

方案2：通过React状态动态控制（适合需要自定义复杂样式的场景） #

如果需要和组件内其他逻辑联动控制样式，可以给编辑器外层包裹容器，通过disabled状态动态绑定类名：

组件代码修改

// 示例用状态控制禁用状态，你可以根据自己的业务逻辑调整
const [isEditorDisabled, setIsEditorDisabled] = useState(true);

return (
  <div className={`ck-editor-container ${isEditorDisabled ? 'ck-container-disabled' : ''}`}>
    <CKEditor
      disabled={isEditorDisabled}
      editor={Editor}
      config={{
        toolbar: [
          'bold',
          'italic',
          'underline',
          'bulletedList',
          'numberedList',
          'link',
          '|',
          'imageUpload'
        ],
        placeholder: 'Start writing your note'
      }}
      onReady={editor => {
        console.log('Editor is ready to use!', editor);
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data });
      }}
    />
  </div>
)

对应CSS代码

.ck-container-disabled .ck .ck-editor__main > .ck-editor__editable {
  background: #C3C3C3;
}

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