如何在角度2中集成CKEditor

我正在尝试将CKEditor集成到我的角度项目中.我已经遵循了其他类似的解决方案,但只出现了textarea.这是我到目前为止所做的.

HTML

    
    
    
    



                            This is my textarea to be replaced with CKEditor.
            
    

JS

import {Component} from '@angular/core';

@Component({
    selector: 'test',
    templateUrl:'test.html'
})

export class TestComponent {

}

小智.. 22

从Angular 4开始,angular-cli是构建和管理Angular项目的标准工具.

这些是在Angular 4应用程序中启动和测试CKEditor的步骤.

假设angular-cli已安装.

1.创建一个新的Angular应用程序

$ ng new ckeditorSample --skip-test
$ cd ckeditorSample

2.安装ng2-ckeditor

ng2-ckeditor是Angular 2及更高版本的CKEditor集成包.

$ npm install --save ng2-ckeditor
$ npm update

3.添加SampleEditor组件

修改src/app/app.component.ts以包含SampleEditor组件.

import { Component } from '@angular/core';

  @Component({
  selector: 'sampleEditor',
  template: `
  
  
  `,
})
export class SampleEditor {
  private ckeditorContent: string;
  constructor() {
    this.ckeditorContent = `
Greetings from CKEditor...
`;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

4.添加SampleEditor查看器模板

修改src/app/app.component.html以调用SampleEditor组件.

5.将CKEditor模块添加到Angular应用程序

修改src/app/app.module.ts以包含CKEditorModule和SampleEditor组件.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';

import { AppComponent, SampleEditor } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    SampleEditor
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6.将最新的CKEditor脚本从CDN添加到Angular框架

修改src/index.html以包含最新的脚本.

截至撰写本文时: https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js

查看最新信息:http://cdn.ckeditor.com/

7.运行应用程序

npm start &
firefox http://localhost:4200

在http:// localhost:4200上打开浏览器 CKEditor应该在那里.

1> 小智..：

---

从Angular 4开始,angular-cli是构建和管理Angular项目的标准工具.

这些是在Angular 4应用程序中启动和测试CKEditor的步骤.

假设angular-cli已安装.

1.创建一个新的Angular应用程序

$ ng new ckeditorSample --skip-test
$ cd ckeditorSample

2.安装ng2-ckeditor

ng2-ckeditor是Angular 2及更高版本的CKEditor集成包.

$ npm install --save ng2-ckeditor
$ npm update

3.添加SampleEditor组件

修改src/app/app.component.ts以包含SampleEditor组件.

import { Component } from '@angular/core';

  @Component({
  selector: 'sampleEditor',
  template: `
  
  
  `,
})
export class SampleEditor {
  private ckeditorContent: string;
  constructor() {
    this.ckeditorContent = `
Greetings from CKEditor...
`;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

4.添加SampleEditor查看器模板

修改src/app/app.component.html以调用SampleEditor组件.

5.将CKEditor模块添加到Angular应用程序

修改src/app/app.module.ts以包含CKEditorModule和SampleEditor组件.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';

import { AppComponent, SampleEditor } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    SampleEditor
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6.将最新的CKEditor脚本从CDN添加到Angular框架

修改src/index.html以包含最新的脚本.

截至撰写本文时: https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js

查看最新信息:http://cdn.ckeditor.com/

7.运行应用程序

npm start &
firefox http://localhost:4200

在http:// localhost:4200上打开浏览器 CKEditor应该在那里.

2> Sumama Wahee..：

---

您可以使用包装CKEditor库的组件:

https://github.com/chymz/ng2-ckeditor

这使得它非常容易并提供双向绑定:

编辑:

另一个选择是使用我重构ng2-ckeditor并简化的模块.这样您就不必安装和管理其他依赖项.

1.创建文件 ckeditor.module.ts

2.粘贴内容

import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, forwardRef, NgZone, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

declare const CKEDITOR;

@Component({
    selector: 'app-ckeditor',
    template: `
                    {{value}}
        
    `,
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => CkEditorComponent),
        multi: true
    }]
})
export class CkEditorComponent implements OnInit, OnDestroy, ControlValueAccessor {


    @ViewChild('editor') editor: ElementRef;

    wait = false;

    instance: any;

    config = {
        uiColor: '#F0F3F4',
        height: '100%'
    };

    private _value = '';

    get value(): any { return this._value; }
    @Input() set value(v) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }

    constructor(private zone: NgZone) { }

    ngOnInit() {
        this.instance = CKEDITOR.replace(this.editor.nativeElement, this.config);

        this.instance.setData(this._value);

        // CKEditor change event
        this.instance.on('change', () => {
            let value = this.instance.getData();
            this.updateValue(value);
        });
    }

    /**
   * Value update process
   */
    updateValue(value: any) {
        this.zone.run(() => {
            this.value = value;
            this.onChange(value);
            this.onTouched();
        });
    }

    /**
   * Implements ControlValueAccessor
   */
    writeValue(value: any) {
        console.log('writeValue');
        this._value = value;
        if (this.instance) {
            this.instance.setData(value);
        }
    }
    onChange(_: any) { }
    onTouched() { }
    registerOnChange(fn: any) { this.onChange = fn; }
    registerOnTouched(fn: any) { this.onTouched = fn; }



    ngOnDestroy() {
        if (this.instance) {
            setTimeout(() => {
                this.instance.removeAllListeners();
                CKEDITOR.instances[this.instance.name].destroy();
                this.instance.destroy();
                this.instance = null;
            });
        }
    }
}

@NgModule({
    imports: [],
    declarations: [CkEditorComponent],
    providers: [],
    exports: [CkEditorComponent]
})
export class CkEditorModule { }

3.像这样使用

import { CkEditorModule } from '../../';

4.我需要使用此功能时动态加载脚本

    public addCkEditor(permissions) {
        if (this.usesCKEditor(permissions) && !window['CKEDITOR']) {
            const url = '//cdn.ckeditor.com/4.7.3/full/ckeditor.js';
            const script = document.createElement('script');
            script.onload = () => {
                this.ckeditorLoaded.next(true);
            };
            script.type = 'text/javascript';
            script.src = url;
            document.body.appendChild(script);
        }
    }