تایپاسکریپت - Angular-cli و ساخت سفارشی Ckeditor4

من در حال تنظیم نسخهی مخصوص خودم از CkEditor4 هستم و نیاز دارم از آن در برنامهی Angular-cli خود استفاده کنم. هیچ ایدهای ندارم چگونه به فایل ckeditor.js که در پروژهی Angular من است دسترسی پیدا کنم. نمیخواهم از CDN استفاده کنم.

من مستنداتی که توسط CKEditor ارائه شده بود را بررسی کردم: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_angular.html

من میفهمم که باید آن دو خط را جایی در پروژهام بنویسم.

<script src="my-custom-build/ckeditor.js"></script>
<script src="your-app-bundle.js"></script>

من راهحلهای زیادی را امتحان کردهام اما هیچکدامشان کار نمیکنند. - مسیر ckeditor.js را در scripts فایل angular.json قرار دهید - تگ scripts را در هدر فایل index.html قرار دهید

پکیج.جیسان

{
  "name": "web2print",
  "version": "0.0.0",
  "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.15",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "~7.2.0",
    "@angular/http": "^7.2.15",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "angular2-image-gallery": "^7.0.0",
    "ckeditor4-angular": "^0.1.2",
    "core-js": "^2.6.8",
    "cors": "^2.8.5",
    "express": "^4.17.0",
    "hammerjs": "^2.0.8",
    "ng2-ckeditor": "^1.2.2",
    "ng2-file-upload": "^1.3.0",
    "ngx-build-plus": "^7.8.3",
    "rxjs": "~6.5.2",
    "rxjs-compat": "^6.5.2",
    "screenfull": "^4.2.0",
    "tslib": "^1.9.0",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web2print</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

ویرایشگر.component.ts

import {AfterViewChecked, Component} from '@angular/core';
import { CKEditorModule, CKEditorComponent } from 'ng2-ckeditor';



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

}

پیغام خطا:

GET http://localhost:4200/ckeditor/ckeditor.js net::ERR_ABORTED 404 (Not Found)

پاسخ شماره ۱

پس از اینکه ساخت CKEditor 4 خود را با استفاده از ابزار ساخت پیکربندی کردید، آن را دانلود کرده، از حالت فشرده خارج کنید و به دایرکتوریای درون پوشه «assets» منتقل کنید. من از پوشهای به نام «vendor» استفاده میکنم:

سپس پارامتر editorUrl از کامپوننت ckeditor را تنظیم کنید:

<ckeditor [(ngModel)]="template"
  editorUrl="/assets/vendor/ckeditor/ckeditor.js"
  [config]="ckeditorConfig"
  (ready)="onEditorReady()">
</ckeditor>