Question

我有关于如何使用tinymce的任务。我按照文档的基本教程，但我不知道ngModel是否不适用于textarea。在我的代码中，我的onMessage函数中的htmlBody是提交textearea的内容。是否有理由不提交htmlBody的内容？当我触发onMessage（）函数时，不会提交htmlBody的内容。这是我的问题

    <div class="tiny">


     <div id="tinyFormGroup" class="form-group">
        <div  class="hidden">
            <textarea  [(ngModel)]="htmlBody" id="baseTextArea" name="body" >{{htmlBody}}</textarea>
        </div>
        </div>


    </div>
    <div class="form-group">
                  <button type="submit" class="btn btn-primary">Submit</button>


                </form>

    inputs: ['mceContent'],
        outputs: ['contentChanged'],
        providers:[HttpService]

export class EmailComponent {

    private elementRef: ElementRef;
    private elementID: string;
    private htmlBody = "Write Your Message Here";
    private title;




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


    }





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






        tinymce.init(
            {


                mode: 'exact',
                height: 300,

                theme: 'modern',

                ],

                elements: this.elementID,
                setup: this.tinyMCESetup.bind(this)
            }
        );
    }

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

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

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

    onMessage(){


        this.httpService.addDraft(this.htmlBody)
        .subscribe(data => {


        })


    }
}

Answer 1

这是非常基本的，这就是我在textarea上不使用ngModel时的做法。

export class EmailComponent {


        private htmlBody = "Write Your Message Here";

        sendMessage = {

          htmlBody = "";

        }

tinyMCEOnKeyup(e) {
        this.contentChanged.emit(tinymce.get(this.elementID).getContent());
       this.sendMessage.htmlBody = tinymce.get(this.elementID).getContent();
        this.contentChanged.emit(this.editor.htmlBody);

    }

onSubmit(){

        this.httpService.addDraft(this.sendMessage.htmlBody)
        .subscribe(data => {

        })

在Angular 2中绑定Textarea

1 个答案: