テキストエリアのWysiwygとAureliaの統合はありますか？

Question

私は現在、それはこのようにほとんど見えSummernote

を使用しています： デモhttp://aurelia-tinymce-sample.sukobuto.com/

githubのhttps://github.com/sukobuto/aurelia-tinymce-sample

しかし、私は実際にテキストエリアのトンをバインドすることはできませんので、これはnodejsで動作し、

このWYSIWYGのリストは、それぞれのレビューで見つかりましたが、どれもアウレリアと完全に統合されていないようです。

https://github.com/iDoRecall/comparisons/blob/master/JavaScript-WYSIWYG-editors.md

nodejsを避けるためのアイデアやヒントはありますか？

Answer 1

EDIT：

この質問 Using CKEditor with Aurelia はオーレリアとCKEditorバージョンを使用する方法のより良い例があります。あなたは を使ってください。ここで

---

はCKEditorバージョンを使用した例です。

JS - 入力-editor.js

import {inject, bindable, bindingMode, containerless} from 'aurelia-framework'; 

@containerless 
@inject(Element) 
export class InputEditor { 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value; 
    @bindable name; 

    constructor(element) { 
    this.element = element; 
    } 

    updateValue() { 
    this.value = this.textArea.value; 
    } 

    bind() { 
    this.textArea = this.element.parentElement.getElementsByTagName('textarea')[0]; 
    let editor = CKEDITOR.replace(this.textArea); 
    this.editorName = editor.name; 
    editor.on('change', (e) => { 
     this.value = e.editor.getData(); 
    }); 
    } 

} 

HTML入力-editor.html

<template> 
    <textarea change.trigger="updateValue()"></textarea> 
    <input type="hidden" name.bind="name" value.bind="value" /> 
</template> 

今、あなたはこのようにそれを使用する必要があります。

<input-editor value.bind="someProperty"> 
</input-editor> 

I CKEDITORがいくつかのファイルを非同期的にロードしなければならないので、webpack/systemJSで適切にCKEDITORをロードする方法はまだ分かりません。だから、私は<script>タグを使用して、グローバルにロードする必要がありました：

<script src="/layout/js/lib/ckeditor/ckeditor.js"></script> 

ロードアプローチは良いことではありませんが、それが正常に動作します。