angular - 带有 angular2 angular cli 的 CKeditor 组件

Question

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

我已经安装了 this package使用 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 中:

从'ng2-ckeditor'导入{CKEditorModule};

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

运行 ng build 和 ng serve 后，我的控制台出现以下错误:

Unexpected value 'CKEditorModule' imported by the module 'AppModule'

我不明白为什么？

Answer 1

我找到了解决这个问题的方法:

1. 在您的 index.html 中，只需将其添加到标题 block 中:

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

1. 通过 NPM 安装 ng2-ckeditor

   npm install ng2-ckeditor --save

2. 在您的 app.component.ts 中添加:

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

3. 像这样使用编辑器:

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