在 Aurelia 中使用 CKEditor [英] Using CKEditor with Aurelia

问题描述

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

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 的编辑器.我把它命名为editor:

Now, let's create out editor based on CKEDITOR. I named it as 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的架构，这是必要的

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

在您的 index.html 中，在所有 <script> 标签之前添加这一行:

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

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

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

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

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.

希望这有帮助！

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