angular - 我们如何在 ANGULAR 6 中将 ckfinder 集成到 ckeditor 中？

Question

嗨，我一直在尝试将 ckeditor5 与 Angular 应用程序集成，并按照文档中给出的说明进行操作。

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/ckfinder.html

正常的 ckeditor5 正在工作，但是当我尝试使用它启用 ckfinder 时，它无法正常工作。具体来说，我正在尝试将图像上传到服务器，并且需要执行一些基本操作，例如 CKFinder 中提到的图像大小调整。根据文档，当我们单击 ckfinder 按钮时，它应该打开模态框，但现在它没有打开“

感谢您的时间，并提前感谢

我正在粘贴我的文件供您参考

app.component.html

<ckeditor
[(ngModel)]="model.editorData"
[editor]="Editor"
[config]="{
toolbar: ['ckfinder'],
ckfinder: {
  options: {
    resourceType: 'Images'
  },
  uploadUrl: 'http://localhost:3000/test/upload/iamge'
 }
}"
></ckeditor>

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'ckeditor2';

public Editor = ClassicEditor;
public model = {
 editorData: '<p>Hello, world!</p>'
};}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     NgxEditorModule,
     HttpClientModule,
     AngularFontAwesomeModule,
     CKEditorModule
 ],
 providers: [],
 bootstrap: [AppComponent]
  })
export class AppModule {}

标签： angularckeditorckfinder

Answer 1

只包括

<script src="ckeditor.com/apps/ckfinder/3.4.5/ckfinder.js"></script> 

进入 index.html 文件，它会工作！