对于textarea wysiwyg和Aurelia有任何整合吗？

Question

我目前正在使用Summernote

看起来非常像这样： 演示http://aurelia-tinymce-sample.sukobuto.com/

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

但这适用于nodejs，所以我无法真正绑定大量的textareas，

我发现所有WYSIWYG的列表都有评论，但似乎没有一个与aurelia完全整合

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

任何避免nodejs的想法或提示？

Answer 1

  

修改

     

这个问题   Using CKEditor with Aurelia   有一个更好的例子，说明如何将CKEDITOR与Aurelia一起使用。你应该   用那个。

这是使用CKEDITOR的一个例子。

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

我仍然没有想出如何使用webpack / systemJS正确加载CKEDITOR，因为CKEDITOR必须异步加载一些文件。所以，我必须使用<script>标记全局加载它：

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

加载方法不是那么好，但它工作正常。

Answer 2

Froala提供了一个WYSIWYG编辑器看起来非常好，但我还没有使用它，它确实有许可证。

https://www.froala.com/wysiwyg-editor