使用Angular CLI集成CKeditor组件

Question

我想在Angular2中使用ckeditor。我正在使用Angular CLI，并且有一个非常基本的工作应用程序。

我使用npm install ng2-ckeditor安装了这个包。我已经按照他们的示例设置了我的system.config.js文件：

System.config({
    "map": {
      "ng2-ckeditor": "npm:ng2-ckeditor",
    },
    "packages": {
      "ng2-ckeditor": {
        "main": "lib/index.js",
        "defaultExtension": "js",
      },
    }
  });

我将其包含在同样的方式中，放在了app.modules.ts文件中：

import { CKEditorModule } from 'ng2-ckeditor';

@NgModule({
  // ...
  imports:      [
    CKEditorModule
  ],
  // ...
})
export class AppModule { }

在运行ng build和ng serve之后，我的控制台中出现了以下错误：

模块'AppModule'导入的'CKEditorModule'值不符合预期

我不明白为什么会出现这个错误？

- Inigo

---

这个问题在Angular 4方面已经得到了完全的回答，请点击此处。 - Dudi Boy

Answer 1

我发现了解决这个问题的方法：

1. 在你的index.html文件中，只需在头部添加以下代码：

<script src="https://cdn.ckeditor.com/4.6.1/full/ckeditor.js"></script>

2. NPM安装ng2-ckeditor：

   npm install ng2-ckeditor --save

3. 在app.component.ts中添加以下代码：

   import { CKEditorComponent } from '../../../node_modules/ng2-ckeditor/src/ckeditor.component'; @NgModule({ declarations: [ CKEditorComponent ], exports: [ CKEditorComponent, ] })

4. 使用编辑器的方式如下：

   <ckeditor [(ngModel)]="myContent" debounce="500"></ckeditor>

- Thierry

---

+1 for the example. 有没有一种方法可以添加需要修改config.js的外部插件？所涉及的插件是pbckcode。 - shark1608