文本区域所见即所得和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屋!