使用 TinyMce 发送电子邮件- Angular 2

Question

如何将输入字段（名称）中的数据和文本区域（正文）中的数据绑定到我的服务以及 post 我的服务器？ tinymce 是否有特定的方式来做到这一点？问题似乎出在我的 ngModel 绑定到输入上。请问我的代码中缺少什么？提前致谢

分量

<div class="col-sm-11">
    <h1>Tiny MCe</h1>
    <label>Title</label>
    <input name="title" [(ngModel)]="editor.title" placeholder="Subject" type="text" class="form-control" required>
    <div class="tiny">
        <div id="tinyFormGroup" class="form-group">
            <div class="hidden">
                <textarea [(ngModel)]="editor.body" id="baseTextArea">{{body}}</textarea>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button type="button" (click)="sendData()">Send</button>
    </div>
</div>

@Component({
    inputs: ['mceContent'],
    outputs: ['contentChanged'],
    providers:[HttpService]
})

// source of this module - 
// http://www.unitydatasystems.com/blog/2015/12/16/angular-2-tinymce-wysiwyg-editor/

export class EmailComponent {

    private elementRef: ElementRef;
    private elementID: string;



    public contentChanged: EventEmitter<any>;

    constructor(@Inject(ElementRef) elementRef: ElementRef, private httpService:HttpService)
    {
        this.elementRef = elementRef;

        var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
        var uniqid = randLetter + Date.now();

        this.elementID = 'tinymce' + uniqid;
        this.contentChanged = new EventEmitter();
    }

    editor= {

       title:"",
       body: ""

    }

    ngAfterViewInit()
    {
        //Clone base textarea
        var baseTextArea = this.elementRef.nativeElement.querySelector("#baseTextArea");
        var clonedTextArea = baseTextArea.cloneNode(true);
        clonedTextArea.id = this.elementID;

        var formGroup = this.elementRef.nativeElement.querySelector("#tinyFormGroup");
        formGroup.appendChild(clonedTextArea);


        //Attach tinyMCE to cloned textarea
        tinymce.init(
            {


                forced_root_block : "",
                mode: 'exact',
                height: 300,

                theme: 'modern',
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen template',
                    'insertdatetime media table contextmenu paste code'
                ],
                toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
                elements: this.elementID,
                setup: this.tinyMCESetup.bind(this)
            }
        );
    }

    ngOnDestroy() {
        //destroy cloned elements
        tinymce.get(this.elementID).remove();

        var elem = document.getElementById(this.elementID);
        elem.parentElement.removeChild(elem);
    }

    tinyMCESetup(ed) {
        ed.on('keyup', this.tinyMCEOnKeyup.bind(this));
    }

    tinyMCEOnKeyup(e) {
        this.contentChanged.emit(tinymce.get(this.elementID).getContent());
    }

    set mceContent(content) {
        this.body = content;
    }

    sendData(){

        this.httpService.sendEmail(this.editor)
        .subscribe(data => {

            console.log(data);
        })


    }
}

Answer 1

您正在克隆文本区域，因此之后不会有 ngModel 更新，ngModel 绑定到一个元素，克隆该元素不会克隆 ngModel 行为。您不能在动态创建的元素上使用 ngModel。

如果我是你我会怎么做：

首先创建一个实现 ControlValueAccessor 的自定义组件输入，以便可以与 ngModel 和 formControl 一起使用。

ControlValueAccessor

A bridge between a control and a native element.

A ControlValueAccessor abstracts the operations of writing a new value to a DOM element representing an input control.

Please see DefaultValueAccessor for more information.
在那个组件中，在一个元素上创建一个 tinyMCE 实例，在那个 tinyMCE 实例上，监听输入事件并将更改传播到 formControl / ngModel。
然后像任何输入一样使用我的组件： <my-component [(ngModel)]="myModel"></my-component>

使用 TinyMce 发送电子邮件- Angular 2

Sending Emails Using TinyMce- Angular 2

tinymce

angular

ControlValueAccessor