我正在尝试将CKEditor集成到我的角度项目中.我已经遵循了其他类似的解决方案,但只出现了textarea.这是我到目前为止所做的.
<!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>
import {Component} from '@angular/core';
@Component({
selector: 'test',
templateUrl:'test.html'
})
export class TestComponent {
}
Dud*_*Boy 22
从Angular 4开始,angular-cli是构建和管理Angular项目的标准工具.
这些是在Angular 4应用程序中启动和测试CKEditor的步骤.
假设angular-cli已安装.
$ ng new ckeditorSample --skip-test
$ cd ckeditorSample
ng2-ckeditor是Angular 2及更高版本的CKEditor集成包.
$ npm install --save ng2-ckeditor
$ npm update
修改src/app/app.component.ts以包含SampleEditor组件.
import { Component } from '@angular/core';
@Component({
selector: 'sampleEditor',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#a4a4a4'}"
(change)="onChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
debounce="500">
</ckeditor>
`,
})
export class SampleEditor {
private ckeditorContent: string;
constructor() {
this.ckeditorContent = `<p>Greetings from CKEditor...</p>`;
}
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
修改src/app/app.component.html以调用SampleEditor组件.
<div>
<sampleEditor></sampleEditor>
</div>
修改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 { }
修改src/index.html以包含最新的脚本.
截至撰写本文时: https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js
查看最新信息:http://cdn.ckeditor.com/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CkeditorSample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdn.ckeditor.com/4.7.0/standard-all/ckeditor.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
npm start &
firefox http://localhost:4200
在http:// localhost:4200上打开浏览器 CKEditor应该在那里.
您可以使用包装CKEditor库的组件:
https://github.com/chymz/ng2-ckeditor
这使得它非常容易并提供双向绑定:
<ckeditor [(ngModel)]="content" [config]="config"></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: `
<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);
}
}
| 归档时间： |
|
| 查看次数： |
19516 次 |
| 最近记录： |