在Angular/CLI中使用ng2-ckeditor

Question

请不要将此问题标记为重复，因为stackoverflow上提供的解决方案都无法解决我的问题， 我正在尝试将ng2-ckeditor ckeditor集成到现有的angular 4项目中。 我试图按照这里描述的步骤进行，但没有成功。我在git和stackoverflow上找到了不同的讨论，但对我没有用。

我按以下步骤进行：

在我的索引文件中引用了以下js文件。

1 <script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
2 <script src="config.js"></script>

在我的 app.module.ts 中导入模块。

import{CKEditorModule} from "ng2-ckeditor"; 
.
.
.;

imports: [
    BrowserModule,
    AppRoutingModule,
  .
  .
  .,
    CKEditorModule,
  ],

但是当我尝试在我的应用程序中使用 ckeditor 代码时

<ckeditor [(ngModel)]="description" > </ckeditor>

它被标记为未知元素，并且我收到以下文本提示

[Angular]
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

当我运行ng serve命令时，编译成功，但没有显示任何内容，并出现以下控制台错误。

Uncaught Error: Template parse errors:
'ckeditor' is not a known element:
1. If 'ckeditor' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("N' | translate:lang }}</span>
            <div formControlName="description" [froalaEditor] ></div>
[ERROR ->]<ckeditor></ckeditor>
          </mat-card-content>
        </mat-card>

任何帮助将不胜感激。

- monther zlatan

---

你有任何 module.ts 文件，除了 app.module.ts 文件吗？如果有，请将其导出到那里。因为它完全取决于项目结构。 - Hrishikesh Kale

Answer 1

我刚刚创建了一个示例应用程序，集成了ng2-ckeditor: ng2-ckeditor-example。 不需要使用SystemJS。我只是将这行代码放在index.html文件中。

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

然后导入CKEditorModule（用于ckeditor指令）和FormsModule（用于ngModel）。 希望我能帮到你！

- Junior Gantin

Answer 2

一个愚蠢的错误浪费了很多时间，导入了模块但忘记导出。

@NgModule({
    imports: [... , CKEditorModule],
    declarations: [
        ...
    ],
    exports: [
        ...
        CKEditorModule //Don't forget to export
    ],
})

- Shree Krishna