Angular-cli和Ckeditor4自定义构建

Question

Angular-cli和Ckeditor4自定义构建

4

我正在设置自己的CkEditor4构建，并且需要从我的Angular-cli应用程序中访问它。我不知道如何访问在我的Angular项目中的ckeditor.js文件。我不想使用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路径放到angular.json中的scripts中。 - 在index.html文件的header中放置scripts标记。

Package.Json

{
  "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>

editor.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)

- N.Ba

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Max Mumford · Accepted Answer

使用构建工具配置好CKEditor 4构建后，下载并解压缩它，将其移动到“assets”文件夹内的一个目录中。我使用了一个名为“vendor”的文件夹：

然后设置 ckeditor 组件的 editorUrl 参数：

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