[英]CkEditor and Angular Material 2 Tabs
我使用 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。
你知道為什么嗎? 提前謝謝你。
我通過使用這個技巧來解決這個問題(臟修復但有效)。
首先,在您的 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)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.