如何在Angular App中实现ckeditor

Question

我正在尝试在我的Angular应用程序中设置 ckeditor ，然后遵循https://github.com/chymz/chymz/ng2-ckeditor#angular中的步骤 - -ckeditor-component

获取错误'无法找到模块'@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",
    "favicon.ico",
    {
       "glob": "**/*", 
       "input": "../node_modules/ckeditor/", 
       "output": "assets/js/ckeditor/", 
       "allowOutsideOutDir": true
    }
 ]

还将ckeditor.js从下载的npm添加到angular-cli.json中的脚本标签：

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

下载您需要使用的插件到项目的文件夹/Assets/js/ckeditor/plugins/。请确保插件文件中的插件文件中的每个子文件夹中存在。

。

创建您自己的配置文件资产/js/ckeditor/ckeditor-config.js ckeditor，其中包含以下内容：

(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-Type控制台警告。这是因为警告中指定的CSS文件有评论。

Answer 2

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

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

npm install --save ckeditor4-angular

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

import { CKEditorModule } from 'ckeditor4-angular';
@NgModule( {
    imports: [
        ...
        CKEditorModule,
        ...
    ],
    …
} )

然后您可以在组件模板中使用<ckeditor>标签来包括富文本编辑器：

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

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

有关更高级的配置，您可以参考官方CKEditor 4 Angular Integration Guide 。