React中自定义CKEditor 5标题：样式类与直接注入问题咨询

一、直接为标题注入内联样式（无需类） #

如果不想依赖样式类，可以直接在 CKEditor 配置里为不同级别的标题添加内联样式。修改 heading 选项的 element 属性，直接内嵌样式规则：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import CustomEditor from './path/to/your/custom-ckeditor';

function App() {
  const editorConfig = {
    heading: {
      options: [
        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
        {
          model: 'heading1',
          view: {
            name: 'h1',
            styles: {
              'font-size': '2.5rem',
              'font-weight': '700',
              'color': '#2c3e50',
              'margin-bottom': '1rem'
            }
          },
          title: 'Heading 1'
        },
        {
          model: 'heading2',
          view: {
            name: 'h2',
            styles: {
              'font-size': '2rem',
              'font-weight': '600',
              'color': '#34495e',
              'margin-bottom': '0.8rem'
            }
          },
          title: 'Heading 2'
        }
        // 其他级别标题可按此格式配置
      ]
    }
  };

  return (
    <CKEditor
      editor={CustomEditor}
      config={editorConfig}
      data="<p>Hello from CKEditor 5!</p>"
    />
  );
}

export default App;

二、创建自定义样式类并应用 #

1. 在 CKEditor 配置中定义自定义类名 #

在编辑器配置里给标题指定自定义类，再在 React 中编写对应样式：

// 编辑器配置
const editorConfig = {
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      {
        model: 'heading1',
        view: {
          name: 'h1',
          classes: 'custom-heading-1'
        },
        title: 'Heading 1'
      },
      {
        model: 'heading2',
        view: {
          name: 'h2',
          classes: 'custom-heading-2'
        },
        title: 'Heading 2'
      }
    ]
  }
};

接着在 React 组件的样式文件（如 App.css）中编写类样式：

.custom-heading-1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #e74c3c;
  margin: 1.5rem 0 1rem;
}

.custom-heading-2 {
  font-size: 2rem;
  font-weight: 600;
  color: #f39c12;
  margin: 1.2rem 0 0.8rem;
}

2. 覆盖 CKEditor 默认标题类 #

CKEditor 会自动给标题添加默认类（如 ck-heading-level1、ck-heading-level2），直接在样式中覆盖即可：

/* 在全局样式文件（如 src/index.css）中编写 */
.ck-editor__editable .ck-heading-level1 {
  font-size: 3rem;
  font-weight: 800;
  color: #27ae60;
  border-bottom: 2px solid #27ae60;
  padding-bottom: 0.5rem;
}

.ck-editor__editable .ck-heading-level2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #2980b9;
}

三、React 中全局声明样式类的方法 #

• 最直接的方式是在项目根目录的 index.css（或 App.css）中编写全局样式，只要该文件被引入到入口文件（index.js），样式就会全局生效。
• 如果使用 CSS Modules，想要声明全局样式，可以在类名前加 :global()：

/* 在组件的 CSS Modules 文件中 */
:global(.custom-heading-3) {
  font-size: 1.8rem;
  color: #8e44ad;
  font-style: italic;
}

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