Question

好吧，对于我的生活，我无法弄清楚如何以角度2加载CKEDITOR。

我跑了

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

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

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

现在我无法弄清楚如何将其导入角度2组件。

我添加了一个refence标签（///＆lt; reference ...＆gt;）并且没有工作。我完全被困了

修改

这是我的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，所以用你的路径替换我的路径）

@Primary

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

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

    }
}

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

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

以角度2加载CKEDITOR

1 个答案: