[英]How to add plugins to ng2-ckeditor using TypeScript and Angular 2 ?
[英]ng2-ckeditor not working in angular2 app? Why?
我试图在我的angular2应用程序中使用ng2-ckeditor组件,但由于某种原因我在控制台说不断收到错误
原始例外:ReferenceError:未定义CKEDITOR
这是我的代码。
system.config.json
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'rxjs': 'node_modules/rxjs',
'angular2-tree-component': 'node_modules/angular2-tree-component',
'lodash': 'node_modules/lodash',
'ng2-ckeditor': 'node_modules/ng2-ckeditor'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-tree-component' : { main: 'dist/angular2-tree-component.js', defaultExtension: 'js' },
'lodash' : { main: 'lodash.js', defaultExtension: 'js' },
'ng2-ckeditor' : { main: 'lib/CKEditor.js', defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
content.component.ts
import { Component, Input } from '@angular/core';
import { Content } from './models/content';
import { CKEditor } from 'ng2-ckeditor';
@Component({
selector: 'content',
template: '<ckeditor [(ngModel)]="content.text" [config]="{ uiColor: '#99000' }" debounce="500"></ckeditor>',
directives: [ CKEditor ]
})
export class ContentComponent {
@Input()
content: Content;
active: number = 1;
sizes: number[] = [ 12, 11, 10, 9, 8, 7, 6, 4, 5, 3, 2, 1 ];
getAnchor() {
return '';
}
}
也可以在这里看到,在我的网络选项卡中,正在加载CKEditor.js文件。
任何人都知道为什么这不起作用?
这意味着你的CKEDITOR JavaScript没有加载。
文件CKEditor.js
引用的Angular2组件不包含编辑器本身。 该文件是回购的一部分 。
所以你需要自己包含ckeditor.js 。
我不确定159行的条件,它应该检测丢失的CKEDITOR JavaScripts。 也许在CKEditor.js
哪一行显示整个错误消息它会引发错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.