小编Ego*_*kov的帖子

需要帮助将CKEditor添加到我的ANGULAR 4 ("@angular/core": "^4.2.4") 组件。

如果我将添加<script src="https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js"></script>到index.html，这将起作用，但是库非常重，这就是我尝试通过组件加载源脚本的原因。

我在所有生命周期钩子上尝试了安全标记槽管。如果向构造函数添加安全标记，则脚本会加载源代码，但 CKEditor 库在 DOM 中看不到源脚本。

非常感谢任何帮助。

源代码：cke-component.component.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ckeEditor',
  templateUrl: './cke-component.component.html',
})
export class CKEditor {

  private ckeditorContent: string;

  html:string;

  constructor( ) {
    this.ckeditorContent = `<p>Greetings from CKEditor...</p>`;
    this.html = '<script src ="https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js"></script>';

  }


}

cke-component.component.html

<p>
  cke-component works!
</p>
<div>
  <span [innerHTML]=" html | blogCkeScript "></span>

  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#a4a4a4'}"
    (change)="onChange($event)"
    (ready)="onReady($event)"
    (focus)="onFocus($event)"
    (blur)="onBlur($event)"
    debounce="500">
  </ckeditor>
</div>

blog-cke-script.pipe.ts …