Verwendung von CKEditor mit Aurelia

Question

Hat jemand ein gutes Arbeitsbeispiel für die Verwendung von CKEditor in Aurelia? Ich versuche, diesen Code in meiner Vorlagendatei, aber die folgende Fehlermeldung erhalten:

<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> 

Fehler: c [a] ist nicht definiert system.js 4992: 13

Answer 1

Dieses Beispiel funktioniert gut in ESNext/SystemJS Skelett .

Zuerst installieren ckeditor über jspm:

jspm install npm:ckeditor 

Nun lassen Sie uns Editor auf CKEditor basierend erstellen aus. Ich nannte es als 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(); 
    }); 
    } 
} 

Der folgende Teil ist seltsam, aber es ist notwendig, da ckeditor des achitecture

In Ihrem index.html, fügen Sie diese Zeile vor allen <script> tags:

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

Es erzählt CKEditor, dass sein Vermögen in den jeweiligen Ordner befinden. Sei nur vorsichtig mit der Version.

Ihre Komponente sollte jetzt funktionieren, aber wir müssen einige zusätzliche Konfiguration vornehmen, damit es in der Produktion funktioniert.

CKEDITOR lädt einige Dateien asynchron. Diese Dateien müssen beim Bündeln und Exportieren der App exportiert werden. Dazu bearbeiten build/export.js, die nun in etwa so sein sollte:

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

Nun wird der gulp export Befehl alle notwendigen Dateien exportieren.

Hoffe, das hilft!

Answer 2

Ich konnte diese Arbeit mit Ausnahme eines Problems bekommen. Wenn Wert gesetzt wird, bevor der Editor initialisiert wird, erscheint der Valus im Editor. Wenn ich den Wert jedoch nach der Initialisierung des Editors programmgesteuert festlege, wird er nicht im Editor angezeigt. Das Eingabesteuerelement wird mit dem neuen Wert aktualisiert, nicht jedoch mit dem Editor.

EDIT Ich weiß, dass dies eine ernste kluge, aber ich war in der Lage, um es auf diese Weise zu arbeiten:

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 setvalue programmtically gesetzt. Ich habe versucht, den Beobachter zum Wert hinzuzufügen, aber ich konnte den Text nicht bearbeiten, als ich das getan habe. Ich würde gerne einen besseren Weg hören, dies zu tun.