以角度2加载CKEDITOR

Question

好吧，就我的一生而言，我不知道如何在angular 2中加载CKEDITOR。

我已运行

"typings install dt~ckeditor --global --save"

ckeditor位于/lib/ckeditor/ceditor.js，因此在地图部分的system.config.js中，我有：

"CKEDITOR": 'lib/ckeditor/ckeditor.js'

现在我不知道如何将其导入到角度2的组件中。

我添加了一个refence标记（///<reference…>），但不起作用。我完全被卡住了

编辑

这是我的系统.config.js

 /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'moment':                     'node_modules/moment/moment.js',
    'ckeditor' :                   'node_modules/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-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ckeditor':                   { main:'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);

Answer 1

安装Typeings只为您添加类型检查，而不会自行导入库，我将展示添加ckeditor的两种方法一种方法是使用组件中的路径导入它，如下所示：（我通过npm安装了ckeditor，命令是npm install ckeditor-S，所以用你的路径替换我的路径）

import { Component, ElementRef , AfterViewInit} from '@angular/core';
let ckeditor = require("node_modules/ckeditor/ckeditor.js");
@Component( {
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: './app.tmpl.html'
})
export class AppComponent implements AfterViewInit
{
    ngAfterViewInit()
    {
        ckeditor.basePath="/node_modules/ckeditor/";
        console.log(ckeditor);
        ckeditor.replace('sample');
    }
}

您可以通过：将ckeditor类型添加到我定义的变量中，并从类型检查中受益，也不要忘记添加basePath，因为ckeditor需要查找其依赖项。另一种方法是通过systemJs加载它，对于这个解决方案，请转到system.config.js文件并添加以下行：

var map = {
    'app':                        'src', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
    ,'ckeditor' :                   'node_modules/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-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    ,'ckeditor':                  {main:'ckeditor.js',defaultExtension:'js'}
  };

现在请注意我在map和packages对象中定义的ckeditor部分，因为它们都是必需的现在在你的组件中，你可以这样导入它：

import { Component, ElementRef , AfterViewInit} from '@angular/core';
//let ckeditor = require("node_modules/ckeditor/ckeditor.js");
import * as ckeditor from "ckeditor";
@Component( {
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: './app.tmpl.html'
})
export class AppComponent implements AfterViewInit
{
    ngAfterViewInit()
    {
        ckeditor.basePath="/node_modules/ckeditor/";
        console.log(ckeditor);
        ckeditor.replace('sample');
    }
}