79190288

Date: 2024-11-14 20:18:28
Score: 1
Natty:
Report link

I am probably late to the party, but if anybody else is wondering how to solve this issue, you can set CKeditor to readonly mode. That way the CSS will work properly images will be also rendered properly. Below you will find my implementation in angular 18, using CKeditor 5.

Implementation

TS

public ReadOnlyEditor = ClassicEditor;

ngAfterViewInit(): void{
    this.previewText = "<p>Hello world</p>";
    this.readonlyConfig = {
        toolbar: {
            items: [],
        },
        plugins: [
            ...same plugins as in CKeditor you use to create content
        ],
        initialData: this.previewText, //text inside editor
        menuBar: {
            isVisible: false
        },
    };
    this.isLayoutReady = true;
}

previewReady(editor: any){
    editor.enableReadOnlyMode("1"); //set readonly mode
}

HTML

<ckeditor *ngIf="isLayoutReady" 
          [editor]="ReadOnlyEditor" 
          (ready)="previewReady($event)" 
          [config]="readonlyConfig"/>
Reasons:
  • Blacklisted phrase (1): how to solve
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Peter VanĂ¡t