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

【问题标题】：Sending Emails Using TinyMce- Angular 2使用 TinyMce-Angular 2 发送电子邮件
【发布时间】：2017-03-22 17:44:21
【问题描述】：

如何将输入字段（名称）中的数据和文本区域（正文）中的数据绑定到我的服务并发布到我的服务器？有没有一种特定的方式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);
        })


    }
}

【问题讨论】：

题外话，但是您真正拥有多少个用户帐户 Switz/Beginner/Liska Liskor？除了这三个之外，只是为了知道以便我可以数数吗？ :D
它没有回答我的问题，我基本上不知道你的题外话：）认真

标签： angular tinymce

【解决方案1】：

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

如果我是你，我会怎么做：

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

ControlValueAccessor

控件和原生元素之间的桥梁。

ControlValueAccessor 抽象了将新值写入表示输入控件的 DOM 元素的操作。

请查看DefaultValueAccessor了解更多信息。
在该组件中，在一个元素上创建一个 tinyMCE 实例，在该 tinyMCE 实例上，侦听输入事件并将更改传播到 formControl / ngModel。
然后像任何输入一样使用我的组件： <my-component [(ngModel)]="myModel"></my-component>

【讨论】：

ControlValueAccessor