我使用angular-cli,angular-material 2,我尝试使用CKEditor(ng2-ckeditor)。
当我直接在HTML(一个div内)中插入CkEditor时,没有问题一切正常。
但是当我按照以下结构移动CkEditor代码时:
<md-tab-group>
<md-tab label="Another label description">
Contents 1
</md-tab>
<md-tab label="Label description">
<div>
<md-card>
<md-card-header>
<md-card-title>
This is a title
</md-card-title>
</md-card-header>
<md-card-content>
<ckeditor name="htmlTextValue"
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
(change)="onChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
debounce="500">
</ckeditor>
</md-card-content>
</md-card>
</div>
</md-tab>
</md-tab-group>
它失败了,这是来自控制台的堆栈跟踪:
ERROR TypeError: Cannot read property 'unselectable' of null
at b (ckeditor.js:331)
at a.<anonymous> (ckeditor.js:327)
at a.m (ckeditor.js:10)
at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.fireOnce (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13)
at Object.<anonymous> (ckeditor.js:251)
at e (ckeditor.js:231)
at Object.load (ckeditor.js:231)
以下是package.json中的重要信息:
"dependencies": {
"@angular/animations": "^4.1.1",
"@angular/common": "^4.1.1",
"@angular/compiler": "^4.1.1",
"@angular/core": "^4.1.1",
"@angular/forms": "^4.1.1",
"@angular/http": "^4.1.1",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "^4.1.1",
"@angular/platform-browser-dynamic": "^4.1.1",
"@angular/router": "^4.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"ng2-ckeditor": "^1.1.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.2",
"@angular/compiler-cli": "^4.1.1",
"@types/hammerjs": "^2.0.34",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
这是我的组件代码:
ckeditorContent = 'This is a text';
onChange($event) {
console.log('Change');
console.log($event);
}
onReady($event) {
console.log('OnReady');
console.log($event);
}
onFocus($event) {
console.log('Focus');
console.log($event);
}
onBlur($event) {
console.log('Blur');
console.log($event);
}
我也尝试了ckeditor构建器,以便添加divarea插件但没有运气。
不幸的是我无法为此创建一个plunker,因为现在不支持angular-cli。
你知道为什么吗? 提前谢谢。
答案 0 :(得分:0)
我已经通过使用此技巧(已解决问题,但可以正常工作)解决了这个问题。
首先,装饰HTML模板中的ckeditor,以便仅在方法isVisible()返回true时才可见:
<ng-container *ngIf="isVisible()">
<ckeditor data="" [config]="ckEditorConfig"
(dataChange)="newData($event)" debounce="500"></ckeditor>
</ng-container>
然后在您的TypeScript中,添加方法isVisible()如下。此方法需要您注入ElementRef(将其添加到组件构造函数中):
constructor(
// add this line and import ElementRef:
// import { ElementRef } from '@angular/core';
private elementRef: ElementRef
) {
// keep any existing code that exists
}
isVisible(): boolean {
const element = this.elementRef.nativeElement;
return element.offsetParent !== null;
}
这样做,只有当组件可见时,CKEditor才会实例化(假设当组件可见时,它已完成加载)。
请注意,使用ElementRef会使您的应用程序更容易受到攻击(请参阅: https://angular.io/api/core/ElementRef )