Question

我需要有关如何使用WYSIWYG编辑器（在我的情况下特别是CKEditor）运行双向绑定的建议。数据正确加载到编辑器中，但是当我修改文本时，不要立即显示在模型中。我试图手动调用事件（更改，onchange，按键，键盘，textInput等...）并失败。

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>

Answer 1

我找到了一个解决方案，但并不好。如果有人想干净利落地做，我很受欢迎。

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());
        });
    }


}

具有Angular2和双向绑定的Wysiwyg

1 个答案: