Angular 4.将Ckeditor添加到component.ts [英] Angular 4. Add Ckeditor to component.ts

问题描述

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

Need help to add CKEditor to my ANGULAR 4("@angular/core": "^4.2.4") component.

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

This will work if i will add <script src="https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js"></script> to index.html , but library is very heavy, that is why i try to load source script through component.

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

I tried safe markup trough pipe on all lifecycle hooks. If add safe markup to constructor, then script is loads the source code, but CKEditor library can't see source script in the DOM.

非常感谢您的帮助.

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

Source code: 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

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

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

}

推荐答案

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

Thanks to Alex Beugnet and code from github.com/akveo/ng2-admin the solution was found!

1)npm install --save ckeditor(它将使用ckeditor库安装模块)

1) npm install --save ckeditor (it will install the module with ckeditor library)

2)创建ckeditor.loader.ts并在组件的文件夹中添加一个加载器(例如

2) create ckeditor.loader.ts and add a loader at component's folder ( like here 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)删除所有未使用的代码 谢谢！

4) remove all unused code Thanks!

这篇关于Angular 4.将Ckeditor添加到component.ts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！