将 CKEditor 与 Aurelia 集成
我正在开发一个需要所见即所得编辑器的 SPA。为此，我决定将 CKEditor 与 aurelia、aurelia-cli、npm 和 typescript 一起使用。
我已经安装了
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
您必须在代码中导入 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 任务来导出这些文件。
在 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”