在 CKEditor 5 中保留标准插件的样式属性

Question

我在我的 angular 应用中使用 CKEditor 5 @ckeditor/ckeditor5-angular。当我使用 CKEditor 时，我可以应用列表样式以及缩进和取消缩进，并在编辑器预览中查看它们。

但是，该模型不会收到这些插件创建的 style 属性。所以我假设 CKEditor 正在剥离它们。

这是我的组件（简化）：

import * as Editor from 'src/ckeditor';

@Component({
  selector: 'app-service-form',
  templateUrl: './service-form.component.html',
  styleUrls: ['./service-form.component.scss']
})
export class ServiceFormComponent {
  public editor = Editor;
  public editorConfig = {
    toolbar: {
      items: ['Bold', 'Italic', 'Underline', 'Superscript', 'FontSize', '|', 'BulletedList', 'NumberedList', 'HorizontalLine', '|', 'Alignment', 'Outdent', 'Indent', '|', 'Undo', 'Redo'],
    },
  };
}

关于这个主题，我唯一发现的是 CKEditor 4 到 5 的 migration guide，这意味着版本 4 中有一个 allowedContent 配置，而版本 5 中没有。

问题 1：我怎样才能使这些基本插件工作（即保留它们生成的 style 属性）而无需编写自定义插件的简单配置？
问题 2：为什么它们不能开箱即用？这是 CKEditor 的错误还是我这边的错误？

亲切的问候
帕特里克

Answer 1

问题不在 CKEditor 中。这是angulars security，它删除了样式属性：more details

基本上，您必须注入 DomSanitizer，然后通过其 bypassSecurityTrustHtml(myText).

传递 CKEditor 的输出

示例：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-preview',
  styleUrls: ['./preview.component.scss'],
  template: `
    <div [innerHTML]="safeText"></div>
  `,
})
export class PreviewComponent{
  public safeText: SafeHtml = this._sanitizer.bypassSecurityTrustHtml('<p style="margin-left: 40px">Hello World!</p>');

  constructor(
    private readonly _sanitizer: DomSanitizer,
  ) { }
}

在 CKEditor 5 中保留标准插件的样式属性

Preserve style attributes from standard plugins in CKEditor 5

angular

ckeditor