Preserve style attributes from standard plugins in CKEditor 5

user_1295856 0
Viewed 334

I'm using CKEditor 5 in my angular app with @ckeditor/ckeditor5-angular. When I use the CKEditor, I can apply list-styles as well as indent and outdent and see those in the editor preview.

However, the model does not receive the style attribute created by those plugins. So I assume CKEditor is stripping them away.

Here's my component (simplified):

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'],
    },
  };
}

The only thing I found about this topic was the migration guide from CKEditor 4 to 5, which implies there was a allowedContent configuration in version 4, which is missing in version 5.

Question 1: How can I make those basic plugins work (i.e. preserve their generated style attributes) with plain configuration and without the need of writing a custom plugin?
Question 2: Why don't they work out-of-the-box? Is this a CKEditor bug or a mistake on my side?

Kind regards
Patrick

angular ckeditor
1 Answers

The problem is not within CKEditor. It's angulars security, which removes the style attribute: more details

Basically, you have to inject DomSanitizer and then pass the output of CKEditor through its bypassSecurityTrustHtml(myText).

Example:

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,
  ) { }
}
user_12958560
Related