[英]Wysiwyg with Angular2 and two-way binding
I need advice on how to run a two-way binding using a WYSIWYG editor (in my case specifically CKEditor). 我需要有关如何使用WYSIWYG编辑器(在我的情况下为CKEditor)运行双向绑定的建议。 Data is loaded into the editor correctly, but when I modify text, so do not show immediately in the model.
数据已正确加载到编辑器中,但是当我修改文本时,因此不要立即在模型中显示。 I tried to manually call events (change, onchange, keypress, keyup, textInput etc ...) and failed.
我试图手动调用事件(更改,onchange,按键,键盘输入,textInput等),但失败了。
CKEditor directive: CKEditor指令:
import {Directive, ElementRef} from "angular2/core";
@Directive({
selector: 'textarea.cke-editor'
})
export class CkePlugin{
constructor(elementRef:ElementRef) {
CKEDITOR.replace(elementRef.nativeElement);
}
}
Component: 零件:
import {Component} from "angular2/core";
import {RouterLink} from 'angular2/router';
import {ProductEntity} from "../../../entity/product.entity";
import {ProductProvider} from "../../../providers/product.provider";
import {CkePlugin} from "../../../plugins/cke.plugin";
@Component({
templateUrl: '/templates/productshopdetailbasic',
directives: [RouterLink, CkePlugin]
})
export class ProductShopDetailBasicComponent{
product:ProductEntity;
private _productProvider:ProductProvider;
constructor(productProvider:ProductProvider){
this.product = productProvider.product;
this._productProvider = productProvider;
}
saveProduct(){
this._productProvider.saveChanges();
}
}
Template: 模板:
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-7">
<textarea
cols="80"
id="editor1"
name="editor1"
rows="10"
class="cke-editor"
[(ngModel)]="product.productShop.description"
ngControl="description" #description="ngForm"
>
</textarea>
</div>
</div>
I found a solution, but not good.If someone thought to do it cleanly, I'm welcome. 我找到了解决方案,但是效果不好,如果有人认为应该彻底解决问题,我会很欢迎。
import {Directive, ElementRef, EventEmitter, OnInit} from "angular2/core";
@Directive({
selector: 'textarea.cke',
})
export class CkePlugin implements OnInit{
private _elementRef:ElementRef;
private _editor;
private _valueChange = new EventEmitter();
constructor(elementRef:ElementRef) {
this._elementRef = elementRef;
this._editor = CKEDITOR.replace(this._elementRef.nativeElement);
//Total s**t
this._elementRef.nativeElement.style.visibility = 'visible';
this._elementRef.nativeElement.style.display = 'inline';
this._elementRef.nativeElement.style.setProperty("display", "inline", "important");
this._elementRef.nativeElement.style.setProperty("visibility", "visible", "important");
this._elementRef.nativeElement.style.setProperty("width", "0px", "important");
this._elementRef.nativeElement.style.setProperty("height", "0px", "important");
this._elementRef.nativeElement.style.setProperty("background", "none", "important");
this._elementRef.nativeElement.style.setProperty("border", "none", "important");
this._elementRef.nativeElement.style.setProperty("opacity", "0", "important");
this._valueChange.subscribe(res => {
var focused = document.activeElement;
$(this._elementRef.nativeElement).focus();
$(this._elementRef.nativeElement).val(res);
var textEvent = document.createEvent('TextEvent');
textEvent.initTextEvent ('textInput', true, true, null, "\0", 9, "en-US");
this._elementRef.nativeElement.dispatchEvent(textEvent);
$(focused).focus();
});
}
ngOnInit():any {
var base = this;
this._editor.on('change', function(){
base._valueChange.emit(base._editor.getData());
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.