Angular 6 DecoupledEditor 不像演示中那样显示页面预览

Question

我想使用 ckeditor 的文档查看器。它看起来像一个普通的ckeditor，我想要带有页面的版本。

看起来像这样： original

在我的应用程序中它看起来像这样： my app

我安装了 CKeditor：

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

并用于HTML：

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

在组件中：

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
    );

  }

Answer 1

您需要一些额外的样式来获得本机文本处理器的外观和感觉。 – oleq

Angular 6 DecoupledEditor 不像演示中那样显示页面预览

Angular 6 DecoupledEditor Not showing page preview like in demo

ckeditor

ckeditor5