将CKEditor与Aurelia一起使用

有没有人有一个在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

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

首先，通过jspm安装ckeditor：

jspm install npm:ckeditor

现在，让我们基于CKEDITOR创建一个编辑器。我把它命名为编辑器：

editor.html：

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

在index.html中，在所有标记之前添加此行：

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

---

希望这有帮助

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

首先，通过jspm安装ckeditor：

jspm install npm:ckeditor

现在，让我们基于CKEDITOR创建一个编辑器。我把它命名为编辑器：

editor.html：

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

在index.html中，在所有标记之前添加此行：

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

---

希望这有帮助

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

编辑 我知道这是一个严重的问题，但我能够以这种方式解决：

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。我试图添加观察员的价值，但我无法编辑文本时，我这样做。我很想听到一个更好的方法来做这件事。

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

编辑 我知道这是一个严重的问题，但我能够以这种方式解决：

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。我试图添加观察员的价值，但我无法编辑文本时，我这样做。我很想听到一个更好的方法来做这件事。

看看这个答案，也许它有帮助，我不确定它是否仍然有效。无论如何，我会尽量在有时间的时候写一个更好的答案是的，这是我从中得到上述想法的帖子……但似乎有一个错误：我一直在尝试不同的编辑……summernote、tinymce、ckeditor和froala。它们在Aurelia应用程序中的使用似乎都有问题。您无法使用require元素加载javascript文件，并且Aurelia不支持模板中的脚本选项卡。请参阅此答案，可能会有所帮助。我不确定它是否仍然有效。无论如何，我会尽量在有时间的时候写一个更好的答案是的，这是我从中得到上述想法的帖子……但似乎有一个错误：我一直在尝试不同的编辑……summernote、tinymce、ckeditor和froala。在Aurelia应用程序中使用它们似乎都有问题。您不能使用require元素加载javascript文件，并且Aurelia不支持模板中的脚本选项卡。谢谢。我将脚本标记移到了索引文件中，它成功了。我在github上放了一份项目副本，谢谢你的帮助。我也会将您的内容保存到演示项目中，以便保存一份好的副本。我在GitHub上用您的更改更新了演示代码，删除了导出和捆绑内容。谢谢。@FabioLuz看起来很不错，但不知道名字和editorName是干什么用的？@PWKad这个名字对发布隐藏的输入很有用。我用于一些奇怪配置的editorName，但它不是必需的。我会更新答案。另外，我已经编写了一个aurelia ckeditor插件，但我仍在等待我的PR获得批准，以便该插件可以在CLI上工作：谢谢。我将脚本标记移到了索引文件中，它成功了。我在github上放了一份项目副本，谢谢你的帮助。我也会将您的内容保存到演示项目中，以便保存一份好的副本。我在GitHub上用您的更改更新了演示代码，删除了导出和捆绑内容。谢谢。@FabioLuz看起来很不错，但不知道名字和editorName是干什么用的？@PWKad这个名字对发布隐藏的输入很有用。我用于一些奇怪配置的editorName，但它不是必需的。我会更新答案。此外，我还编写了一个aurelia ckeditor插件，但我仍在等待我的PR获得批准，以便该插件可以在CLI上工作：

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/*'
      ]
    ]
  ]
};

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