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>

博客-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

我们已在角度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",
  ...

您的editer 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,
    ...
  ],

yap，当然你必须先安装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）删除所有未使用的代码谢谢！

Angular 4.将Ckeditor添加到component.ts

2 个答案: