将 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] 未定义 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

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

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

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

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

将 CKEditor 与 Aurelia 结合使用

Using CKEditor with Aurelia

ckeditor

aurelia