2016-07-08 6 views
3

私はangular2アプリケーションでNG2-CKEditorバージョンのコンポーネントを使用しようとしていますが、何らかの理由で、私はここでang2アプリでng2-ckeditorが動作していませんか?どうして?

ORIGINAL EXCEPTION: ReferenceError: CKEDITOR is not defined

を言ってコンソールにエラーを取得しておくが、私が持っているコードです。

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ファイルがロードされていることがわかります。

enter image description here

誰もがこのありえないが働いて、なぜ任意のアイデアがありますか?

+0

これは役に立ちますhttp://stackoverflow.com/a/37526911/5868331 – mayur

答えて

1

これは、CKEDITOR JavaScriptが読み込まれなかったことを意味します。

ファイルCKEditor.jsは、エディタ自体を含まないAngular2コンポーネントを指します。そのファイルはpart of the repoです。

自分でckeditor.jsを含める必要があります。

line 159の条件について不明ですが、欠けているCKEDITOR JavaScriptを検出するはずです。たぶんエラーメッセージが表示され、CKEditor.jsの行内にエラーが表示されることがあります。

+0

私はnpm 'npm install ckeditor --save'を介してCKEditorをインストールしました。私もsystemjs経由で読み込むことができますか? – Gillardo

+1

私はあなたができないと確信しています。 CKEditorはモジュールシステムをサポートしていないので、それに '

関連する問題