Angular 18 SSR集成CKEditor遇样式未加载问题求解决方案

一、修复CKEditor CSS未加载问题 #

你当前的代码仅加载了CKEditor的JS逻辑，未引入核心样式文件，导致样式缺失。可以通过两种方式解决：

1. 组件内局部引入
   在loadCkEditor函数开头添加样式导入：

async loadCkEditor() {
  // 导入CKEditor核心样式
  await import('ckeditor5/ckeditor5.css');
  const { Bold, Essentials, Italic, Mention, Paragraph, Undo } = await import('ckeditor5');
  // ... 其余代码不变
}

2. 全局样式引入
   在angular.json的styles数组中添加CKEditor样式路径：

"styles": [
  "src/styles.css",
  "node_modules/ckeditor5/ckeditor5.css"
]

二、优化Angular SSR下的CKEditor加载方式 #

你当前手动通过ClassicEditor.create初始化的方式不够贴合Angular生态，推荐使用官方CKEditorModule提供的组件化方案，更适配SSR且代码更简洁：

优化后的组件代码 #

import { afterNextRender, Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [CommonModule, CKEditorModule],
  template: `
    <ckeditor 
      [editor]="editor" 
      [config]="config"
    ></ckeditor>
  `,
  styleUrl: './editor.component.css',
})
export class EditorComponent {
  editor: any;
  config: any = {
    toolbar: ['undo', 'redo', '|', 'bold', 'italic'],
    plugins: []
  };

  constructor() {
    afterNextRender(async () => {
      // 客户端侧动态导入编辑器及插件
      const { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo } = await import('ckeditor5');
      this.editor = ClassicEditor;
      this.config.plugins = [Bold, Essentials, Italic, Mention, Paragraph, Undo];
    });
  }
}

这种方式利用了Angular官方组件的封装，避免直接操作DOM，同时通过afterNextRender确保仅在客户端执行导入，符合SSR的要求。

三、适配Angular SSR的富文本编辑器替代方案 #

如果CKEditor的SSR适配仍有困扰，可以考虑以下更友好的选项：

• TinyMCE：提供官方Angular组件，支持SSR，配置简单，内置丰富插件，文档完善。
• Quill：轻量级富文本编辑器，核心逻辑无DOM依赖，可通过Angular封装组件实现SSR兼容，适合对体积要求较高的场景。
• Slate：高度可定制，完全无DOM依赖，适合需要自定义编辑器逻辑的复杂场景，但学习成本较高。

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