如何在 Angular 6 应用程序中使用带有 CKEditor 4 的图像上传插件？

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 File:

 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 File:

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

Answer 2

我推荐使用 Jodit Editor，它可以上传文本和图片。

它可以集成到Angular应用程序中，您可以在这里阅读说明https://github.com/jodit/jodit-angular

您可以更改 Jodit Playgroud

所需的任何配置

如何在 Angular 6 应用程序中使用带有 CKEditor 4 的图像上传插件？

How to use Image Upload plugin with CKEditor 4 in Angular 6 Application?

javascript

image-uploading

ckeditor

angular