Question

我正在设置自己的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文件的标题中

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)

Answer 1

使用build tool配置CKEditor 4构建后，下载，解压缩并将其移动到“资产”文件夹中的目录中。我使用一个名为“供应商”的文件夹：

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

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

Angular-cli和Ckeditor4自定义构建

1 个答案: