Angular 4. 将 Ckeditor 添加到 component.ts

Question

需要帮助将 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

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'blogCkeScript',
  pure: true
})
export class BlogCkeScriptPipe implements PipeTransform {


  constructor(private domSanitizer: DomSanitizer) { }


  handleExternalScriptsInHtmlString(string) {
    let that = this;
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var results = [];

    for (var i = 0; i < scripts.length; i++) {
      var src = scripts[i].getAttribute('src');
      if (src.length && results.indexOf(src) === -1) {
        results.push(src);
        that.addScript(src);
      }
    }

    return results;
  }

  addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
  }


  transform(htmlContent: any) {
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent);

    this.handleExternalScriptsInHtmlString(htmlContent);

    return sanitizeHtmlContent;
  }

}

Answer 1

我们已经在我们的 Angular 4 项目中实现了 ck 编辑器，并面临与其他项目相同的情况。

以下步骤将帮助您进行干净的实现，并且不必在 index.html 中放置链接

在你的 polyfills.ts 中添加这一行

// used to programmatically set the configuration of the ckeditor file imports
// Note: this must stay as an import due to all of the imports happening before a statement is run
// no matter where the statement is in this file.
import './ckset';
// needed for our in place editing features
import 'ckeditor';

所以现在在您的 src 文件夹中添加 ckset.ts 文件并放在下面的内容。

// needed for the configuration of ckeditor
(window as any).CKEDITOR_BASEPATH = '/assets/ckeditor/';

您的 Angular cli 现在将尝试从资产文件夹加载 ckedit，如果无法获取它们将失败。所以在构建过程中配置将它们添加到我们的资产文件夹中。

所以将以下代码添加到您的 .angular-cli.json 文件中。

  ...
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico",
    "configuration.json",
    {
      "glob": "{+(adapters|plugins|lang|skins)/**/*,config.js,styles.js,contents.css}",
      "input": "../node_modules/ckeditor",
      "output": "./assets/ckeditor"
    }
  ],
  "index": "index.html",
  ...

您的编辑器 html 将几乎相同，并确保为 divarera 添加额外的插件，因为 iframe 在 angular4 中的绑定和所有问题中会产生其他问题

   <div class="form-group">
      <ckeditor
        [(ngModel)]="text"
        [config]="{extraPlugins: 'divarea' }"
        formControlName="text"
        debounce="500">
      </ckeditor>
    </div>

并确保在您的模块中包含 ng2-ckeditor 模块。

import { CKEditorModule } from 'ng2-ckeditor';

@NgModule({
  imports: [
    CKEditorModule,
    ...
  ],

是的，当然你必须先安装 ng2-ckeditor ;) 或者在你的 package.json 中添加 "ng2-ckeditor": "1.1.9",

npm i --save ng2-ckeditor

Answer 2

感谢 Alex Beugnet 和来自 github.com/akveo/ng2-admin 的代码，找到了解决方案！

1) npm install --save ckeditor（它将安装带有ckeditor库的模块）

2) 创建 ckeditor.loader.ts 并在组件的文件夹中添加一个加载器（比如这里https://github.com/akveo/ng2-admin/blob/master/src/app/pages/editors/components/ckeditor/ckeditor.loader.ts）

ckeditor.loader.ts：

window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.0/full/'; 

3) 在 cke-component.component.ts

处导入模块

import './ckeditor.loader';
import 'ckeditor';

4) 删除所有未使用的代码 谢谢！