文本区域所见即所得和Aurelia是否有任何集成? [英] Is there any integration for a textarea wysiwyg and Aurelia?

问题描述

我目前正在使用Summernote

I'm currently using Summernote

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

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

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

但这可以与nodejs一起使用，因此我无法真正绑定大量文本区域，

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

我找到了所有所见即所得的清单，每个清单都有评论，但似乎都没有与aurelia完全整合

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

是否有避免Node.js的想法或技巧?

Any ideas or tips to avoid nodejs?

推荐答案

这个问题 将CKEditor与Aurelia一起使用 有一个更好的示例，说明如何将CKEDITOR与Aurelia结合使用.你应该 用那个.

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

---

这是使用CKEDITOR的示例.

---

Here's an example using CKEDITOR.

JS-input-editor.js

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

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>

我仍然没有弄清楚如何使用webpack/systemJS正确加载CKEDITOR，因为CKEDITOR必须异步加载一些文件.因此，我必须使用<script>标签在全球范围内加载它:

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.

这篇关于文本区域所见即所得和Aurelia是否有任何集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！