以角度 2 加载 CKEDITOR

Question

好吧，我这辈子都不知道如何在 Angular 2 中加载 CKEDITOR。

我跑了

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

ckeditor 位于 /lib/ckeditor/ckeditor.js 所以在我的 system.config.js 中的地图部分我有：

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

现在我不知道如何将它导入到 angular 2 组件中。

我添加了一个引用标签 (/// ) 并且没有工作。我完全被卡住了

编辑

这是我的 system.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

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

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'}
  };

现在请注意我在地图和包对象中定义的 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');

    }
}