如何在Angular 2中集成CKEditor [英] How to integrate CKEditor in angular 2
问题描述
我正在尝试将CKEditor集成到我的角度项目中.我遵循了其他类似的解决方案，但仅出现了textarea.这是我到目前为止所做的.
I am trying to integrate CKEditor into my angular project. I have followed other similar solutions but only the textarea appears. Here is what I have done so far.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../Email/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
JS
import {Component} from '@angular/core';
@Component({
selector: 'test',
templateUrl:'test.html'
})
export class TestComponent {
}
推荐答案
您可以使用包装CKEditor库的组件:
You can use component that wraps the CKEditor library:
https://github.com/chymz/ng2-ckeditor
这非常简单，并提供双向绑定:
This makes it very easy and provides two-way binding:
<ckeditor [(ngModel)]="content" [config]="config"></ckeditor>
另一个选择是使用此模块，该模块是我从ng2-ckeditor重构并简化的.这样，您不必安装和管理其他依赖项.
Another option is to use this module which I've refactored from ng2-ckeditor and simplified. This way you don't have to install and manage another dependency.
1.创建文件ckeditor.module.ts
1. Create file 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: `
<textarea #editor>
{{value}}
</textarea>
`,
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 '../../';
<app-ckeditor formControlName="postContent"></app-ckeditor>
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);
}
}
这篇关于如何在Angular 2中集成CKEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
