2
我需要如何使用所见即所得编辑器(在我的情况下,特别是CKEditor)运行双向绑定的建议。数据正确加载到编辑器中,但是当我修改文本时,请不要在模型中立即显示。我尝试手动调用事件(更改,onchange,按键,键控,textInput等),并失败。Wysiwyg与Angular2和双向绑定
CKEditor的指令:
import {Directive, ElementRef} from "angular2/core";
@Directive({
selector: 'textarea.cke-editor'
})
export class CkePlugin{
constructor(elementRef:ElementRef) {
CKEDITOR.replace(elementRef.nativeElement);
}
}
组件:
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();
}
}
模板:
<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>
CKEDITOR.replace(elementRef.nativeElement)''做了什么?看起来很激进。 –
它初始化元素CKeditor(并刷新元素的innterHTML) – JaSHin
.replace()是初始化CKEditor的默认方式 – JaSHin