Question

带有 angular 4 的 CKeditor 组件

2017-09-01

9219

javascript angular ckeditor

我是 Angular4 的新手

我想在 Angular4 中集成 CKeditor

我按照这个网址操作，但它适用于 Angular 2，在 Angular 4 中不起作用。

我已经在那里检查过了

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

但 Angular 4 中没有任何 System.config 选项

然后我集成了 froala ，但它给出了许可证错误，也不允许配置，我试过了，但没有效果

我该如何集成Angular4 中的 CKeditor？

Answer 1

我假设您使用 angular-cli 创建您的 angular 4 项目，您不需要 angular-clli 中的 system.config，它只在 system.js 中使用，并且您那里的代码会告诉 system.js 在哪里找到 ckeditor 模块。如果你不清楚，只需检查你的项目是否有“angular-cli.json”文件，如果有，那么你可以按照以下步骤操作：

使用 npm install ng2-ckeditor 安装ng2-ckeditor
在你的 app.module.ts 中，你应该有类似这样的内容

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    CKEditorModule,
    FormsModule
  ],

  providers: [],

  bootstrap: [AppComponent]
})

export class AppModule { }

然后

在你的index.html中添加

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

在head部分内。或者，您可以将 js 文件保存在项目中，然后插入 .angular-cli.json 文件，将该文件的文件添加到 scripts 数组中

然后您就可以在 angular 4 项目中使用 ckeditor 了