Интеграция CKEditor с Aurelia

Question

Я работаю над SPA, который нуждается в редакторе WYSIWYG. Для этого я решил использовать CKEditor с aurelia, aurelia-cli, npm и typcript.

Я установил npm install ckeditor --save

а также в своем файле aurelia.json я добавил пакет ckeditor npm в качестве зависимости.

"dependencies": [
      {
        "name": "ckeditor",
        "path": "../node_modules/ckeditor",
        "main": "ckeditor",
        "resources": [
          "config.js",
          "skins/moono-lisa/editor.css",
          "lang/en.js"
        ]
      }
]

Я также добавил определение типографий ckeditor.d.ts в свою папку custom_typings. https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/ckeditor

В этот момент, когда я обновляю страницу, я получаю следующие ошибки:

Любая помощь приветствуется:)

Uncaught ReferenceError: CKEDITOR is not defined
    at vendor-bundle.js:36119
(anonymous) @ vendor-bundle.js:36119
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-binding.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-binding.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-resources.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-resources.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-event-aggregator.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-event-aggregator.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-history-browser.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-history-browser.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-templating-router.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-templating-router.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin resources/index.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin resources/index.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-dialog.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-dialog.
vendor-bundle.js:11929 DEBUG [aurelia] Loading plugin aurelia-testing.
vendor-bundle.js:11929 DEBUG [aurelia] Configured plugin aurelia-testing.
vendor-bundle.js:11929 DEBUG [templating] importing resources for aurelia-templating-resources/compose []
vendor-bundle.js:11929 DEBUG [templating] importing resources for aurelia-templating-router/router-view []
vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/elements/label-input.html []
vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/elements/label-select.html []
vendor-bundle.js:11939 INFO [aurelia] Aurelia Started
vendor-bundle.js:11929 DEBUG [templating] importing resources for app.html []
vendor-bundle.js:11929 DEBUG [templating] importing resources for resources/dialogs/wysiwyg-editor-dialog.html ["resources/elements/wysiwyg-editor"]
vendor-bundle.js:3790 GET http://localhost/viewer_editor/node_modules/ckeditor/ckeditor.js 
vendor-bundle.js:1399 Unhandled rejection Error: Script error for "ckeditor/ckeditor", needed by: resources/elements/wysiwyg-editor
http://requirejs.org/docs/errors.html#scripterror
    at F (http://localhost/app/263/scripts/vendor-bundle.js:3763:290)
    at HTMLScriptElement.onScriptError (http://localhost/app/263/scripts/vendor-bundle.js:3786:113)
From previous event:
    at DefaultLoader.loadModule (http://localhost/app/263/scripts/vendor-bundle.js:11807:14)
    at DefaultLoader.loadAllModules (http://localhost/app/263/scripts/vendor-bundle.js:11754:25)
    at ViewEngine.importViewResources (http://localhost/app/263/scripts/vendor-bundle.js:19396:26)
    at ViewEngine.loadTemplateResources (http://localhost/app/263/scripts/vendor-bundle.js:19366:19)
    at http://localhost/app/263/scripts/vendor-bundle.js:19314:41
From previous event:
    at ViewEngine.loadViewFactory (http://localhost/app/263/scripts/vendor-bundle.js:19298:67)
    at ConventionalViewStrategy.loadViewFactory (http://localhost/app/263/scripts/vendor-bundle.js:16718:25)
    at HtmlBehaviorResource.load (http://localhost/app/263/scripts/vendor-bundle.js:20056:29)
    at http://localhost/app/263/scripts/vendor-bundle.js:20589:18
From previous event:
    at CompositionEngine.createController (http://localhost/app/263/scripts/vendor-bundle.js:20577:71)
    at CompositionEngine._createControllerAndSwap (http://localhost/app/263/scripts/vendor-bundle.js:20556:19)
    at CompositionEngine.compose (http://localhost/app/263/scripts/vendor-bundle.js:20636:21)
    at http://localhost/app/scripts/app-bundle.js:4618:44
From previous event:
    at http://localhost/app/scripts/app-bundle.js:4613:122
From previous event:
    at _openDialog (http://localhost/app/scripts/app-bundle.js:4609:66)
    at http://localhost/app/scripts/app-bundle.js:4555:16
From previous event:
    at DialogService.open (http://localhost/app/scripts/app-bundle.js:4551:21)
    at CommonDialogs.showWysiwygEditorDialog (http://localhost/app/scripts/app-bundle.js:1375:39)
    at Scene.openWysiwygEditorDialog (http://localhost/app/scripts/app-bundle.js:3591:32)
    at CallScope.evaluate (http://localhost/app/263/scripts/vendor-bundle.js:6658:21)
    at Listener.callSource (http://localhost/app/263/scripts/vendor-bundle.js:10100:42)
    at http://localhost/app/263/scripts/vendor-bundle.js:10124:24
    at HTMLDocument.handleDelegatedEvent (http://localhost/app/263/scripts/vendor-bundle.js:8303:11)
printWarning @ vendor-bundle.js:1399
formatAndLogError @ vendor-bundle.js:1115
fireRejectionEvent @ vendor-bundle.js:1140
Promise._notifyUnhandledRejection @ vendor-bundle.js:587
(anonymous) @ vendor-bundle.js:132

Answer 1

Вы должны импортировать скрипты CKEditor в свой код. Как это:

import 'ckeditor';

Это пример пользовательского элемента, который генерирует CKEditor.

editor.js

import {inject} from 'aurelia-dependency-injection';
import {bindable} from 'aurelia-templating';
import {bindingMode} from 'aurelia-binding';
import {DOM} from 'aurelia-pal';
import 'ckeditor';

@inject(DOM.Element)
export class Editor {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
  @bindable name;

  constructor(element) {
    this.element = element;
  }

  updateValue() {
    this.value = this.textArea.value;
  }

  bind() {
    this.textArea = this.element.getElementsByTagName('textarea')[0];
    let editor = CKEDITOR.replace(this.textArea);
    editor.on('change', (e) => {
      this.value = e.editor.getData();
    });
  }
}

editor.html

<template>
  <textarea change.delegate="updateValue()"></textarea>
  <input type="hidden" name.bind="name" value.bind="value">
</template>

Чтобы эта работа работала, вам нужно будет экспортировать некоторые статические файлы ckeditor, config.js, styles.css, content.css и т. Д. К сожалению, сейчас нет возможности сделать это в CLI (я сделал PR, чтобы добавить эту функцию https://github.com/aurelia/cli/pull/415). Таким образом, вам нужно создать задачу gulp для экспорта этих файлов при сборке приложения.

Answer 2

В Aurelia.json под "copyFiles" включают следующее:

"node_modules / ckeditor /": "wwwroot / ckeditor", "node_modules / ckeditor / skins / moono-lisa /": "wwwroot / ckeditor / skins / moono-lisa", "node_modules / ckeditor / skins / moono-lisa / images /":" wwwroot / ckeditor / skins / moono-lisa / images "," node_modules / ckeditor / lang /":" wwwroot / ckeditor / lang "," node_modules / ckeditor / plugins /":" wwwroot / ckeditor / plugins ", "node_modules / ckeditor / plugins / scayt / skins / moono-lisa /": "wwwroot / ckeditor / plugins / scayt / skins / moono-lisa", "node_modules / ckeditor / plugins / scayt / dialogs /": "wwwroot / ckeditor / plugins / scayt / dialogs "," node_modules / ckeditor / plugins / tableselection / styles /":" wwwroot / ckeditor / plugins / tableselection / styles "," node_modules / ckeditor / plugins / wsc / dialogs /":" wwwroot / ckeditor / plugins / wsc / dialogs "," node_modules / ckeditor / plugins / wsc / skins / moono-lisa /":" wwwroot / ckeditor / plugins / wsc / skins / moono-lisa "