将 CKEditor 与 Aurelia 一起使用

Question

有没有人有一个很好的例子来说明如何在 Aurelia 中使用 CKEditor？我在模板文件中尝试此代码，但收到以下错误：

<template>
<require from="../../../jspm_packages/npm/ckeditor@4.5.10/ckeditor.js"></require>
    <textarea name="editor1" id="editor1"></textarea>
    <script>
        CKEDITOR.replace('editor1');
    </script>
</template>

错误：c[a] is undefined system.js 4992:13

Answer 1

此示例在 ESNext/SystemJS 框架中运行良好。

首先，通过jspm安装ckeditor：

jspm install npm:ckeditor

现在，让我们创建一个基于CKEDITOR 的编辑器。我将其命名为editor：

editor.html：

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

editor.js

import {inject, bindable, bindingMode} from 'aurelia-framework';
import 'ckeditor';

@inject(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();
    });
  }
}

以下部分很奇怪，但由于 ckeditor 的架构，这是必要的

在您的 index.html 中，将此行添加到所有 <script> 标记之前：

<script>var CKEDITOR_BASEPATH = 'jspm_packages/npm/ckeditor@4.5.10/';</script>

它告诉 CKEDITOR 它的资产位于相应的文件夹中。请注意版本。

您的组件现在应该可以工作了，但我们需要做一些额外的配置才能使其在生产中工作。

CKEDITOR 异步加载一些文件。捆绑和导出应用程序时必须导出这些文件。为此，请编辑 build/export.js，现在应该是这样的：

module.exports = {
  'list': [
    'index.html',
    'config.js',
    'favicon.ico',
    'LICENSE',
    'jspm_packages/system.js',
    'jspm_packages/system-polyfills.js',
    'jspm_packages/system-csp-production.js',
    'styles/styles.css'
  ],
  // this section lists any jspm packages that have
  // unbundled resources that need to be exported.
  // these files are in versioned folders and thus
  // must be 'normalized' by jspm to get the proper
  // path.
  'normalize': [
    [
      // include font-awesome.css and its fonts files
      'font-awesome', [
        '/css/font-awesome.min.css',
        '/fonts/*'
      ]
    ], [
      // include bootstrap's font files
      'bootstrap', [
        '/fonts/*'
      ]
    ], [
      'bluebird', [
        '/js/browser/bluebird.min.js'
      ]
    ], [
      'ckeditor', [
        '/config.js',
        '/skins/*',
        '/lang/*'
      ]
    ]
  ]
};

现在，gulp export 命令将导出所有必要的文件。

希望这会有所帮助！

Answer 2

我能够完成这项工作，除了一个问题。如果在初始化编辑器之前设置了值，则值会出现在编辑器中。但是，如果我在编辑器初始化后以编程方式设置值，它不会出现在编辑器中。 Input 控件使用新值更新，但编辑器没有更新。

编辑 我知道这是一个严重的问题，但我能够让它以这种方式工作：

import {inject, bindable, bindingMode} from 'aurelia-framework';
import {ObserverLocator} from "aurelia-binding";
import 'ckeditor';

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

  constructor(element, observerLocator) {
    this.element = element;
    this.subscriptions = [
            observerLocator
                    .getObserver(this, 'setvalue')
                    .subscribe(newValue => {
            if(this.editor) {
              this.editor.setData(newValue);
            }
          })
        ];
  }

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

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

我以编程方式设置 setvalue。我试图在值上添加观察者，但是当我这样做时我无法编辑文本。我很想听听一个更好的方法来做到这一点。