javascript - 以 Angular 2 加载 CKEDITOR

Question

好吧，我怎么也想不出如何在 Angular 2 中加载 CKEDITOR。

我跑了

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

ckeditor 位于/lib/ckeditor/ckeditor.js，因此在我的 map 部分的 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'}
  };

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

    }
}