如何在Angular应用中实现CKEditor？

Question

我正在按照https://github.com/chymz/ng2-ckeditor#angular---ckeditor-component中的步骤尝试在Angular应用程序中设置CKEditor] >>

在以下文件中出现错误'找不到模块'@ angular / core'：ckbutton.directive.d.ts，ckeditor.component.d.ts，ckgroup.directive.d.ts

Dependencies

"dependencies": {
"@angular/common": "~5.2.4",
"@angular/compiler": "~5.2.4",
"@angular/core": "~5.2.4",
"@angular/forms": "~5.2.4",
"@angular/http": "~5.2.4",
"@angular/platform-browser": "~5.2.4",
"@angular/platform-browser-dynamic": "~5.2.4",
"@angular/router": "~5.2.4",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.4.2",
"zone.js": "^0.8.4" },

systemjs.config.js

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': '/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        'app': 'app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler':                       
                            'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-
                                browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-
                           dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-
                                     api/bundles/in-memory-web-api.umd.js',

        //Third party libraries
        'ng2-ckeditor': 'npm:ng2-ckeditor',
    },
    // packages tells the System loader how to load when no filename and/or 
    no extension
    packages: {
        app: {
            defaultExtension: 'js',
            meta: {
                './*.js': {
                    loader: 'systemjs-angular-loader.js'
                }
            }
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'ng2-ckeditor': {
            main: 'lib/index.js',
            defaultExtension: 'js',
        },
    }
});
})(this);
app.module.ts

import { CKEditorModule } from 'ng2-ckeditor';
@NgModule({
imports: [BrowserModule, FormsModule, CKEditorModule,
    RouterModule, RouterModule.forRoot(appRoutes, { useHash: true })
],
我正在尝试通过按照https://github.com/chymz/ng2-ckeditor#angular---ckeditor-component中的步骤在Angular应用程序中设置CKEditor，获取错误'找不到模块'@ angular / core' ...

Answer 1

在项目中不使用CDN，并且不包含项目的CKEditor插件。这是我解决问题的方法：

使用npm与ckeditor一起安装ng2-ckeditor。

Answer 2

最近发布了Angular 5+的官方CKEditor 4 Angular integration。它可能有助于解决您的问题。