Как использовать плагин загрузки изображений с CKEditor 4 в приложении Angular 6?

Question

Я использую ng2-ckeditor в качестве редактора форматированного текста.
Я хочу иметь возможность загружать статьи на сервер, содержащий текст и изображения в одном запросе.
Я проверил документацию CKEditor для плагина загрузки изображений и сделал, как указано в документации, но он все еще не работает для меня.

Вот мой package.json файл:

{
 "name": "cbms",
 "version": "0.0.0",
 "license": "MIT",
 "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
 },
 "private": true,
 "dependencies": {
   "@angular/animations": "~7.2.0",
   "@angular/cdk": "^5.0.4",
   "@angular/common": "~7.2.0",
   "@angular/compiler": "~7.2.0",
   "@angular/core": "~7.2.0",
   "@angular/forms": "~7.2.0",
   "@angular/http": "^4.0.0",
   "@angular/material": "^5.0.4",
   "@angular/platform-browser": "~7.2.0",
   "@angular/platform-browser-dynamic": "~7.2.0",
   "@angular/router": "^4.0.0",
   "@ng-bootstrap/ng-bootstrap": "^1.1.2",
   "@swimlane/ngx-datatable": "^11.1.7",
   "@types/ckeditor": "^4.9.7",
   "@types/googlemaps": "^3.26.16",
   "angular2-image-upload": "^1.0.0-rc.0",
   "angular2-moment": "^1.8.0",
   "bootstrap": "^4.0.0-beta",
   "ckeditor": "^4.11.2",
   "core-js": "^2.4.1",
   "font-awesome": "^4.7.0",
   "ng2-ckeditor": "^1.2.2",
   "resolve-url-loader": "^2.1.0",
   "rxjs": "^6.3.3",
   "rxjs-compat": "^6.3.3",
   "tether": "^1.4.0",
   "tslib": "^1.9.0",
   "typescript": "^3.2.2",
   "zone.js": "^0.8.4"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "~0.12.0",
   "@angular/cli": "~7.2.1",
   "@angular/compiler-cli": "~7.2.0",
   "@types/jasmine": "2.5.38",
   "@types/node": "~6.0.60",
   "bootstrap": "^4.0.0-beta",
   "bootstrap-loader": "^2.1.0",
   "codelyzer": "~2.0.0",
   "jasmine-core": "~2.5.2",
   "jasmine-spec-reporter": "~3.2.0",
   "jquery": "^3.2.1",
   "karma": "~1.4.1",
   "karma-chrome-launcher": "~2.1.1",
   "karma-cli": "~1.0.1",
   "karma-coverage-istanbul-reporter": "^0.2.0",
   "karma-jasmine": "~1.1.0",
   "karma-jasmine-html-reporter": "^0.2.2",
   "protractor": "~5.1.0",
   "tether": "^1.4.0",
   "ts-node": "~2.0.0",
   "tslint": "~4.5.0"
   } 
} 

Вот мой Component.html файл:

<ckeditor #ckeditor 
  [config]="myCkeditorConfig"
  [(ngModel)]="ckeditorContent"
 >
</ckeditor>

Мой Component.ts файл:

this.myCkeditorConfig = {
  toolbar: [
    {
      name: 'document',
      items: ['Print']
    },
    {
      name: 'clipboard',
      items: ['Undo', 'Redo']
    },
    {
      name: 'styles',
      items: ['Format', 'Font', 'FontSize']
    },
    {
      name: 'colors',
      items: ['TextColor', 'BGColor']
    },
    {
      name: 'align',
      items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
    },
    {
      name: 'basicstyles',
      items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
    },
    {
      name: 'links',
      items: ['Link', 'Unlink']
    },
    {
      name: 'paragraph',
      items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
    },
    {
      name: 'tools',
      items: ['Maximize']
    },
    {
      name: 'editing',
      items: ['Scayt']
    }
],

}

Я попытался добавить следующее вобъект конфигурации:

   extraPlugins: 'uploadimage',
   uploadUrl: 'http://cb2-api.azurewebsites.net/api/Events/1/Artwork

Мой конечный результат:

Однако я хочу эту версию загрузки изображений:

Буду признателен за любую помощь!

Answer 1

Чтобы исправить проблему, мне пришлось сменить плагин.Я использовал angular-froala-wysiwyg версия ^ 2.9.3 плагин со следующей конфигурацией:

Файл TS:

 public ckeditorContent: string = 'Enter article';
 public options: Object = {
    charCounterCount: true,
    // Set the image upload parameter.
    imageUploadParam: 'image_param',

    // Set the image upload URL.
    imageUploadURL: 'http://cb2-api.azurewebsites.net/api/posts/article',

    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
    zIndex: 2501,
    height: 300,
    events:  {
      'froalaEditor.initialized':  function () {
        console.log('initialized');
      },
      'froalaEditor.image.beforeUpload':  function  (e,  editor,  images) {
        //Your code 
        if  (images.length) {
          // Create a File Reader.
          const  reader  =  new  FileReader();
          // Set the reader to insert images when they are loaded.
          reader.onload  =  (ev)  =>  {
            const  result  =  ev.target['result'];
            editor.image.insert(result,  null,  null,  editor.image.get());
            console.log(ev,  editor.image,  ev.target['result'])
            console.log(ev.target['result'],'check')
          };
          // Read image as base64.
          reader.readAsDataURL(images[0]);
        }
        // Stop default upload chain.
        return  false;
      }
    }
  };

Файл HTML:

 <div class="row">
   <div class="form-group col-lg-12">
     <label for="prof">Article *</label>
     <div [froalaEditor]="options" [(froalaModel)]="ckeditorContent">
     </div>
   </div>
 </div>