AureliaとCKEditorの統合

Question

私はWYSIWYGエディタを必要とするSPAに取り組んでいます。このために、私はaurelia、aurelia-cli、npm、およびtypescriptでCKEditorを使用することに決めました。

私は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" 
     ] 
     } 
] 

私はまた、custom_typingsフォルダにckeditor.d.ts型定義を追加しました。この時点で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タスクを作成する必要があります。