以角度 2 加载 CKEDITOR

Posted 2023-05-07

【中文标题】以角度 2 加载 CKEDITOR

【英文标题】：Load CKEDITOR in angular 2

【发布时间】：2016-07-21 20:02:06

【问题描述】：

好吧，我这辈子都不知道如何在 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);

【问题讨论】：

听起来好像我没有什么，但我已经搜索了几个小时，但没有找到任何东西

【参考方案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');

    

【讨论】：

我得到了 let ckeditor = ... 工作但导入一直说它找不到模块 'ckeditor'

你在 tsconfig.json correclty 中配置了 typescript 吗？比如将其模块系统设置为 commonjs 并将模块解析设置为 node ？

也告诉我你得到的错误是什么，可能是因为路径相关的问题

我编辑了我的答案并包含了我的 system.config.js，但我只是找不到模块 ckeditor。当我使用 let ckeditor = ... 我没有得到编辑器但是当我 console.log(ckeditor) 它只有一个属性，它是我在 ngOnInit 中设置的基本路径

好的，谢谢你的更新，我告诉你用你的路径替换我的路径，所以在地图对象中用 'ckeditor' 替换 ckeditor 部分：'lib/ckeditor/' 并且不要更改路径对象是好的。基本上你的问题是它找不到 ckeditor 所在的路径 玩它一段时间你会弄明白