Question

我正在开发一款需要WYSIWYG编辑器的SPA。为此，我决定将CKEditor与aurelia，aurelia-cli，npm和typescript一起使用。

我安装了// The len built-in function returns the length of v, according to its type: // Array: the number of elements in v. // Pointer to array: the number of elements in *v (even if v is nil). // Slice, or map: the number of elements in v; if v is nil, len(v) is zero. // String: the number of bytes in v. // Channel: the number of elements queued (unread) in the channel buffer; // if v is nil, len(v) is zero. func len(v Type) int // The cap built-in function returns the capacity of v, according to its type: // Array: the number of elements in v (same as len(v)). // Pointer to array: the number of elements in *v (same as len(v)). // Slice: the maximum length the slice can reach when resliced; // if v is nil, cap(v) is zero. // Channel: the channel buffer capacity, in units of elements; // if v is nil, cap(v) is zero. func cap(v Type) int

并且在我的aurelia.json文件中，我添加了ckeditor npm包作为依赖项。

npm install ckeditor --save

我还在我的custom_typings文件夹中添加了ckeditor.d.ts typings定义。 https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/ckeditor

此时，当我刷新页面时，出现以下错误：

非常感谢任何帮助：）

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

Answer 1

您必须在代码中导入CKEditor的脚本。像这样：

import 'ckeditor';

这是生成CKEditor的custom元素的示例。

<强> 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”

将CKEditor与Aurelia集成

2 个答案: