我们如何在ANGULAR 6的ckeditor中集成ckfinder？

在Angular 6中集成CKEditor和CKFinder，可以通过以下步骤完成：

步骤1：安装CKEditor和CKFinder 首先，需要安装CKEditor和CKFinder。您可以从CKEditor官方网站（https://ckeditor.com/ckeditor-4/download/）下载CKEditor的最新版本，并将其解压缩到您的项目目录中。同样，您可以从CKFinder官方网站（https://ckeditor.com/ckfinder/download/）下载CKFinder的最新版本，并将其解压缩到项目目录中。

步骤2：安装依赖在项目目录中打开命令行界面，运行以下命令安装CKEditor所需的依赖：

npm install --save @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

步骤3：配置Angular 打开app.module.ts文件，并在imports部分添加以下代码：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...
    CKEditorModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  public static readonly ckeditor = ClassicEditor;
}

步骤4：创建CKEditor组件在你的项目中，创建一个CKEditor组件，例如editor.component.ts。在该组件中，添加以下代码：

import { Component } from '@angular/core';
import * as Editor from './app.module';

@Component({
  selector: 'app-editor',
  template: '<ckeditor [editor]="Editor.ckeditor" (ready)="onReady($event)"></ckeditor>'
})
export class EditorComponent {
  public Editor = Editor;

  public onReady(editor: any) {
    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );
  }
}

步骤5：配置CKFinder 打开CKEditor文件夹中的config.js文件，将以下代码添加到文件末尾：

CKEDITOR.editorConfig = function(config) {
  // ...
  config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';
  config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
  config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images';
  config.filebrowserImageUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
  // ...
};

步骤6：配置服务器在项目根目录中创建一个名为server.js的文件，并添加以下代码：

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

步骤7：启动服务器和应用在命令行界面中，运行以下命令启动服务器：