javascript - 如何在 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

我建议使用 Jodit Editor ，它允许您上传文本和图像。

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

您可以更改 Jodit Playgroud 所需的任何配置