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

除了一个问题，我能够完成这项工作。如果在初始化编辑器之前设置了值，则valus将出现在编辑器中。但是，如果我在编辑器初始化后以编程方式设置值，则它不会出现在编辑器中。 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。我尝试在值上添加观察者，但是当我这样做时，我无法编辑文本。我很想听到更好的方法来做到这一点。

将CKEditor与Aurelia一起使用

2 个答案: