Angular 4. Add Ckeditor to component.ts

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

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.

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.

Any help is very appreciated.

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

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

}

We have implemented the ck editor in our angular 4 project and faced same situation with other.

Below are the steps which will help you to have a clean implementation and don't have to put a link in index.html

add this line in your 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';

so in your src folder add the ckset.ts file now and put below content.

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

Your angular cli will now try to load the ckedit from asset folder and will fail if it will not get them. so have configure to add them to our asset folder during build process.

so add below code to your .angular-cli.json file.

  ...
  "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",
  ...

Your editer html will be almost same and make sure to add the extra plugin for divarera as iframe create other problems in angular4 in binding and all

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

And in your module make sure to include ng2-ckeditor module.

import { CKEditorModule } from 'ng2-ckeditor';

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

yap, ofcourse you have to install ng2-ckeditor ;) first or add "ng2-ckeditor": "1.1.9", in your package.json

npm i --save ng2-ckeditor

Egor Doynikov

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

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

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) import modules at cke-component.component.ts

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

4) remove all unused code Thanks!

来源：https://stackoverflow.com/questions/46119865/angular-4-add-ckeditor-to-component-ts

标签

angular

ckeditor