React项目中CKEditor 5如何通过外部事件切换明暗主题？

问题描述 #

我在React应用中使用CKEditor 5，想要实现一个切换功能，让编辑器在明暗主题间切换。查阅官方文档后发现，文档主要介绍从零开始定制主题并构建CKEditor包来定义默认主题，但我需要的是通过外部事件（如全站主题切换按钮触发），动态用CSS修改编辑器背景及插件颜色，实现实时明暗主题切换。目前我的React组件中CKEditor的调用代码如下：

<div>
  <CKEditor
    editor={Editor}
    config={editorConfiguration}
    disabled={isReadOnlyMode}
    data={fieldValue}
    onReady={(editor) => {
      if (isReadOnlyMode) {
        const toolbarElement = editor.ui.view.toolbar.element;
        toolbarElement.style.display = "none";
      }
    }}        
  />
</div>

请问有实现该需求的方法或思路吗？

回答 #

我之前也遇到过类似的需求，不用重新构建CKEditor包就能实现动态主题切换，这里有几个实用的思路和具体方案：

方案一：利用CSS自定义属性（变量）实现全局主题切换 #

这是最简洁高效的方式，通过定义全局CSS变量，配合主题类切换来实时更新CKEditor的样式。

1. 定义全局主题变量和CKEditor样式覆盖

在你的全局CSS文件中添加以下代码：

/* 浅色主题默认变量 */
:root {
  --ck-bg-primary: #ffffff;
  --ck-text-primary: #333333;
  --ck-toolbar-bg: #f8f9fa;
  --ck-panel-bg: #ffffff;
  --ck-border-color: #e1e5e9;
}

/* 深色主题变量 */
body.dark-theme, .dark-theme {
  --ck-bg-primary: #1e1e1e;
  --ck-text-primary: #e0e0e0;
  --ck-toolbar-bg: #2d2d2d;
  --ck-panel-bg: #2d2d2d;
  --ck-border-color: #424242;
}

/* 覆盖CKEditor核心部件样式 */
.ck-editor__editable_inline {
  background-color: var(--ck-bg-primary) !important;
  color: var(--ck-text-primary) !important;
  border-color: var(--ck-border-color) !important;
}

.ck-toolbar, .ck-toolbar__items {
  background-color: var(--ck-toolbar-bg) !important;
  border-color: var(--ck-border-color) !important;
}

.ck-dropdown__panel, .ck-list {
  background-color: var(--ck-panel-bg) !important;
  color: var(--ck-text-primary) !important;
  border-color: var(--ck-border-color) !important;
}

.ck-button {
  color: var(--ck-text-primary) !important;
}

/* 覆盖对话框、弹窗等插件样式 */
.ck-modal {
  background-color: var(--ck-panel-bg) !important;
  color: var(--ck-text-primary) !important;
}

.ck-input {
  background-color: var(--ck-bg-primary) !important;
  color: var(--ck-text-primary) !important;
  border-color: var(--ck-border-color) !important;
}

2. 在React组件中绑定主题切换逻辑

通过React状态管理主题，或者直接操作document.body的类来触发样式切换：

import { useState } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import Editor from '@ckeditor/ckeditor5-build-classic';

const EditorComponent = () => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const [fieldValue, setFieldValue] = useState('');
  const [isReadOnlyMode, setIsReadOnlyMode] = useState(false);

  // 主题切换函数，可绑定到全站切换按钮
  const toggleTheme = () => {
    const newThemeState = !isDarkTheme;
    setIsDarkTheme(newThemeState);
    // 切换body上的主题类，让全局样式生效
    document.body.classList.toggle('dark-theme', newThemeState);
  };

  return (
    <>
      <button onClick={toggleTheme}>
        {isDarkTheme ? '切换到浅色主题' : '切换到深色主题'}
      </button>
      <div>
        <CKEditor
          editor={Editor}
          config={editorConfiguration}
          disabled={isReadOnlyMode}
          data={fieldValue}
          onReady={(editor) => {
            if (isReadOnlyMode) {
              const toolbarElement = editor.ui.view.toolbar.element;
              toolbarElement.style.display = 'none';
            }
          }}
          onChange={(event, editor) => {
            setFieldValue(editor.getData());
          }}
        />
      </div>
    </>
  );
};

export default EditorComponent;

方案二：直接操作CKEditor实例的DOM元素 #

如果需要更精细的控制，可以在onReady中获取CKEditor的UI元素，在主题切换时动态修改样式或添加/移除类：

import { useState } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import Editor from '@ckeditor/ckeditor5-build-classic';

const EditorComponent = () => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const [fieldValue, setFieldValue] = useState('');
  const [isReadOnlyMode, setIsReadOnlyMode] = useState(false);
  const [editorInstance, setEditorInstance] = useState(null);

  // 主题切换函数
  const toggleTheme = () => {
    const newThemeState = !isDarkTheme;
    setIsDarkTheme(newThemeState);
    
    if (!editorInstance) return;
    // 获取编辑器核心DOM元素
    const editorRoot = editorInstance.ui.view.element;
    const editable = editorInstance.ui.view.editable.element;
    const toolbar = editorInstance.ui.view.toolbar.element;

    if (newThemeState) {
      editorRoot.classList.add('dark-theme');
      editable.style.backgroundColor = '#1e1e1e';
      editable.style.color = '#e0e0e0';
      toolbar.style.backgroundColor = '#2d2d2d';
    } else {
      editorRoot.classList.remove('dark-theme');
      editable.style.backgroundColor = '#fff';
      editable.style.color = '#333';
      toolbar.style.backgroundColor = '#f8f9fa';
    }
  };

  return (
    <>
      <button onClick={toggleTheme}>
        {isDarkTheme ? '切换到浅色主题' : '切换到深色主题'}
      </button>
      <div>
        <CKEditor
          editor={Editor}
          config={editorConfiguration}
          disabled={isReadOnlyMode}
          data={fieldValue}
          onReady={(editor) => {
            setEditorInstance(editor);
            if (isReadOnlyMode) {
              const toolbarElement = editor.ui.view.toolbar.element;
              toolbarElement.style.display = 'none';
            }
          }}
          onChange={(event, editor) => {
            setFieldValue(editor.getData());
          }}
        />
      </div>
    </>
  );
};

export default EditorComponent;

注意事项 #

• 由于CKEditor的默认样式优先级较高，覆盖时可能需要使用!important或者更具体的CSS选择器（比如结合编辑器容器类）。
• 可以通过浏览器开发者工具查看CKEditor各个部件的类名，针对性地添加样式覆盖。
• 如果使用全站主题切换，建议将主题状态存在localStorage中，刷新页面后保持主题设置。

内容的提问来源于stack exchange，提问作者Mr.Human