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": {
"@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 })
],

Answer 1

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

使用npm。使用ckeditor安装ng2-ckeditor。

npm install --save ckeditor

和

npm install --save ng2-ckeditor

更新angular-cli.json以便能够将插件添加到CKEditor的实例中。在angular-cli.json的assets部分添加：

"assets": [
    "assets",
    "favicon.ico",
    {
       "glob": "**/*", 
       "input": "../node_modules/ckeditor/", 
       "output": "assets/js/ckeditor/", 
       "allowOutsideOutDir": true
    }
 ]

将下载的npm中的ckeditor.js添加到angular-cli.json中的script-tag中：

"scripts": [
   "../node_modules/ckeditor/ckeditor.js"
]

将需要使用的插件下载到项目的 / assets / js / ckeditor / plugins / 文件夹中。确保插件文件夹的每个子文件夹中都存在plugin.js文件。

使用以下内容为ckeditor创建自己的配置文件assets / js / ckeditor / ckeditor-config.js：

(function(){
    CKEDITOR.basePath = '/assets/js/ckeditor/'
    CKEDITOR.plugins.addExternal('wordcount', 'plugins/wordcount/');
    CKEDITOR.plugins.addExternal('notification', 'plugins/notification/');
    CKEDITOR.editorConfig = function( config ) {
        config.extraPlugins = 'wordcount,notification';
    }
})();

创建内部服务，以便能够使用您自己的输入配置您的ckeditor。在这里，我使用该服务调整高度，并从我的ckeditor组件设置我的字符的最大限制。我也告诉我使用的插件只显示字符计数器。

import { Injectable } from '@angular/core';

@Injectable()
export class CkeditorConfigService {

  constructor() { }
  public getConfig(height: number, maxCharCount: number){
    return {
      customConfig: '/assets/js/ckeditor/ckeditor-config.js',
      height: height,
      wordcount: {
        showParagraphs: false,
        showWordCount: false,
        showCharCount: true,
        maxCharCount: maxCharCount
      }
    };
  }
}

由于ckeditor是表单部分，您需要将 FormsModule 添加到 app.module.ts 以及 ng2-ckeditor 模块。

imports: [
   ...
   FormsModule,
   CKEditorModule,
   ...
]

从您的组件添加内部服务。

@Component({
  selector: 'test-ckeditor-app',
  templateUrl: './editor.component.html',
  providers: [
    CkeditorConfigService
  ]
})
export class EditorComponent implements OnInit {
  ckeditorContent: string = '<p>Some html</p>';
  private myCkeditorConfig: any;
  constructor(private ckService: CkeditorConfigService) {}

  ngOnInit() {
    this.myCkeditorConfig = this.ckService.getConfig(150, 400);
  }

}

最后在你的html文件中添加以下内容：

<ckeditor
   [(ngModel)]="ckeditorContent"
   [config]="myCkeditorConfig">
</ckeditor>

请在github上找到项目示例：

https://github.com/dirbacke/ckeditor4

请注意！编译和运行时，您将收到MIME类型控制台警告。那是因为警告中指定的css文件有注释。

Answer 2

Angular 2+的官方CKEditor 4 Angular integration最近已发布。这可能有助于解决您的问题。

基本用法非常简单：为了在Angular中创建编辑器实例，请安装ckeditor4-angular npm软件包作为项目的依赖项：

npm install --save ckeditor4-angular

安装后，将CKEditorModule导入您的应用程序：

import { CKEditorModule } from 'ckeditor4-angular';

@NgModule( {
    imports: [
        ...
        CKEditorModule,
        ...
    ],
    …
} )

然后，您可以在组件模板中使用<ckeditor>标签来包含RTF编辑器：

<ckeditor data="<p>Hello, world!</p>"></ckeditor>

以上示例中使用的data属性负责设置编辑器的数据。

有关更高级的配置，请参阅official CKEditor 4 Angular integration guide 。

如何在Angular应用程序中实现CKEditor？

2 个答案: