Angular 18 - 使用 ssr 实现 CKEditor

Question

我正在尝试使用 Angular 18 SSR 来实现 CKEditor。

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],
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css',
})
export class EditorComponent {
  editor: any = null;
  config: any;

  constructor() {
    afterNextRender(() => {
      this.loadCkEditor();
    });
  }

  async loadCkEditor() {
    const { Bold, Essentials, Italic, Mention, Paragraph, Undo } = await import(
      'ckeditor5'
    );
    this.config = {
      toolbar: ['undo', 'redo', '|', 'bold', 'italic'],
      plugins: [Bold, Essentials, Italic, Mention, Paragraph, Undo],
    };
    this.editor = (await import('ckeditor5')).ClassicEditor.create(
      document.querySelector('#editor') as any,
      this.config,
    );
  }
}
<div id="editor"></div>

看起来组件正在工作，但 css 未加载。不确定如何修复它或者是否有更好的方法来加载此组件。或者甚至可以使用不同的富文本编辑器，这样使用 Angular ssr 来实现会更简单。请帮忙，谢谢

Answer 1

我认为您错过了导入 CSS，这可能就是问题所在。

import { Component } from '@angular/core';
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

@Component( {
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
} )

官方入门指南