textarea wysiwyg 和 Aurelia 是否有任何集成？答案

【问题标题】：Is there any integration for a textarea wysiwyg and Aurelia?textarea wysiwyg 和 Aurelia 是否有任何集成？
【发布时间】：2016-08-06 19:19:35
【问题描述】：

我目前正在使用 Summernote

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

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

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

我找到了所有 WYSIWYG 的列表，每个都有评论，但似乎没有一个与 aurelia 完全集成

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

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

【问题讨论】：

我有一个使用 CKEDITOR 的示例，全局安装。你有兴趣吗？
如果它使用 aurelia 绑定而不是像我拥有的 node.js ，我会这样做:)，它可能也适用于alloyeditor
是的，它适用于 aurelia 绑定。唯一的问题是我必须使用标签单独加载它。 CKEDITOR 必须异步加载一些文件，我仍然没有弄清楚如何使用 webpack 正确加载它。不过效果很好。

标签： textarea aurelia

【解决方案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 输入编辑器.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>

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

【讨论】：

您可能希望添加代码以删除取消绑定回调中的“更改”事件处理程序。
过去，我曾经删除'change'事件并在 detached() 回调中调用 CKEDITOR.destroy()，但我会收到一个错误，提示该元素不再存在.这应该使用取消绑定而不是分离来解决。谢谢你提醒我！我会更新这个答案。
unbind 也不起作用。见github.com/aurelia/templating/issues/348。

【解决方案2】：

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

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

【讨论】：