我使用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插件但没有运气 .
不幸的是,由于现在不支持angular-cli,我不能为此创建一个plunker .
你知道为什么吗?先感谢您 .