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;
}
}
import 'ckeditor';works at the top of your component ? It should bind to thenode_modulesfolder which has the ckeditor lib