Is there any integration for a textarea wysiwyg and Aurelia?

问题

I'm currently using Summernote

It looks pretty much like this: Demo http://aurelia-tinymce-sample.sukobuto.com/

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

But this works with nodejs so I can't really bind tons of textareas,

I found this list of all the WYSIWYG with reviews on each but none seems to be fully integrated with aurelia

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

Any ideas or tips to avoid nodejs?

回答1:

EDIT:

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

Here's an example using 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>

Now, you just have to use it like this:

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

I still haven't figured out how to properly load CKEDITOR with webpack/systemJS, because CKEDITOR has to load some files asynchronously. So, I had to load it globally, using <script> tags:

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

The loading approach is not that good, but it works fine.

回答2:

Froala offers a WYSIWYG editor that looks really nice, however I've not used it yet, and it does have a license.

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

来源：https://stackoverflow.com/questions/36636621/is-there-any-integration-for-a-textarea-wysiwyg-and-aurelia

标签

textarea

aurelia