Using CKEditor with Aurelia

Question

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>

Error: c[a] is undefined system.js 4992:13

Answer 1

This example works well in ESNext/SystemJS skeleton.

First, install ckeditor via jspm:

jspm install npm:ckeditor

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

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

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

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

It tells CKEDITOR that its assets are located in 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 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/*'
      ]
    ]
  ]
};

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

Hope this helps!

Answer 2

I was able to get this work except for one problem. If value is set before the editor is initialized, the valus appears in the editor. However, if I set value programmatically after the editor is initialized, it does not appear in the editor. The Input control is updated with the new value but not the editor.

EDIT I know this is a serious kluge but I was able to get it to work this way:

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

I set setvalue programmtically. I tried to add the observer on value but I wasn't able to edit the text when I did that. I would love to hear a better way to do this.