Как мы интегрируем ckfinder в ckeditor в ANGULAR 6? - PullRequest
0 голосов
/ 20 февраля 2019

Привет. Я пытался интегрировать ckeditor5 с угловым приложением и следовал инструкциям, приведенным в документе.

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

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

Обычный ckeditor5 isработает, но когда я пытаюсь включить 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 {}

enter image description here

...