使用CKEditor和Aurelia [英] Using CKEditor with Aurelia

问题描述

有没有人有一个很好的工作示例如何使用CKEditor在Aurelia？我尝试这个代码在我的模板文件，但得到以下错误：

Does anyone have a good working example of how to use CKEditor in Aurelia? I try this code in my template file but get the following error:

<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框架中运行良好。

This example works well in ESNext/SystemJS skeleton.

首先，通过jspm安装ckeditor：

First, install ckeditor via jspm:

jspm install npm:ckeditor

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

Now, let's create out editor based on CKEDITOR. I named it as editor:

editor.html： b
$ b

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);
    this.editorName = editor.name;
    editor.on('change', (e) => {
      this.value = e.editor.getData();
    });
  }
}

以下部分是奇数，但由于ckeditor's achitecture

The following part is odd but it is necessary due to ckeditor's achitecture

在 index.html 中，将此行全部添加< script> tags：

In your index.html, add this line before all <script> tags:

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

它告诉CKEDITOR其资产位于相应的文件夹。只要小心版本。

It tells CKEDITOR that its assets are located at the respective folder. Just be careful with the version.

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

Your component should be working by now, but we need to do some additional configuration in order to make it work in production.

CKEDITOR异步加载一些文件。捆绑和导出应用程序时，必须导出这些文件。要执行此操作，请修改 build / export.js ，现在应该是这样：

CKEDITOR loads some files asynchronously. These files must be exported when bundling and exporting the app. To do this, edit build/export.js, which should be something like this now:

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 所有必要的档案。

Now, the gulp export command will export all the necessary files.

希望这会有帮助！

这篇关于使用CKEditor和Aurelia的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！