Search code examples
ckeditorckeditor5

Angular 6 DecoupledEditor Not showing page preview like in demo

I want to use the document viewer from ckeditor. It looks like a normal ckeditor, i want the version with the page.

It looks like this: original

And in my app it looks like this: my app

I installed CKeditor with following:

npm install --save @ckeditor/ckeditor5-angular    
npm i @ckeditor/ckeditor5-build-decoupled-document

And used in HTML:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>

And in Component:

import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';



public Editor = DecoupledEditor;

  public onReady(editor) {
    editor.ui.view.editable.element.parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.view.editable.element
    );

  }
Solution

  • You'll need some additional styles to get the native text processor look and feel. – oleq