Angular 角度4。将Ckeditor添加到component.ts

需要帮助将CKEditor添加到我的ANGULAR 4（“@ANGULAR/core”：“^4.2.4”）组件中

如果我将

添加到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>';

  }


}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'ckeEditor'，
templateUrl:'./cke component.component.html'，
})
导出类编辑器{
私有ckeditorContent：字符串；
html：字符串；
构造函数（）{
this.CKEditor content=`来自CKEditor的问候…
`；
this.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>

cke组件工作！

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

}

从'@angular/core'导入{Pipe，PipeTransform}；
从“@angular/platform browser”导入{domsanizer}；
@烟斗({
名称：“博客脚本”，
纯：真的
})
导出类BlockeScriptPipe实现PipeTransform{
构造函数（私有domsanizer:domsanizer）{}
handleExternalScriptsInHtmlString（字符串）{
让那=这；
var parser=新的DOMParser（）；
var scripts=parser.parseFromString（string，'text/html'）.getElementsByTagName（'script'）；
var结果=[]；
对于（var i=0；i

我们已经在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；）首先或在您的package.json中添加

“ng2 ckeditor”：“1.1.9”

npm i --save ng2-ckeditor

---

多亏了Alex Beugnet和github.com/akveo/ng2-admin的代码，才找到了解决方案

1）

npm安装--保存ckeditor

（它将使用ckeditor库安装模块）

2） 创建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） 删除所有未使用的代码

---

谢谢

不

导入'ckeditor'在组件顶部工作？它应该绑定到包含ckeditor lib的
节点\u modules
文件夹。另外，看看这些家伙做了什么：。他们在他们的组件中实现了一个ckeditor，并使用一个自定义库来简化它。它工作得很好。亚历克斯！非常感谢！发现错误，通过查看你的答案与管理主题！您在package.json中有作为依赖项的ckeditor，对吗？@AlexBeugnet，@Egor我想使用本地下载的ckeditor文件，对于
ckeditor\u BASEPATH
您可以建议如何做。。。我收到
错误类型错误：如果我使用本地路径，则无法设置未定义的属性“dir”
错误您看到NG2 admin是如何做到的吗？它在这方面工作正常
import './ckeditor.loader';
import 'ckeditor';