文本区域所见即所得和 Aurelia 是否有任何集成？

Question

我目前正在使用 Summernote

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

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

但这适用于 nodejs，所以我无法真正绑定大量文本区域，

我找到了所有所见即所得的列表，每个列表都有评论，但 none 似乎与 aurelia 完全集成

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

有什么避免 nodejs 的想法或技巧吗？

Answer 1

EDIT:

This question has a better example of how to use CKEDITOR with Aurelia. You should use that.

---

这是一个使用 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>

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

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

加载方法不是很好，但效果很好。

Answer 2

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

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