Question

我正在尝试在我的应用程序中实现TinyMce。好吧，tinymce显示正常但是当我从tinymce页面路由到另一个页面时，它会抛出如下错误。我的代码行中可能缺少什么？感谢

错误

Uncaught (in promise): TypeError: elem is null

[650]/EmailComponent.prototype.ngOnDestroy@http://localhost:4200/main.bundle.js:1794:9

anonymous/Wrapper_EmailComponent.prototype.ngOnDestroy@/AppModule/EmailComponent/wrapper.ngfactory.js:12:3

组件

import { Component, ElementRef, OnInit, EventEmitter, Output, Inject, ComponentRef } from '@angular/core';
import { Http } from '@angular/http';

declare var tinymce: any;

@Component({
    selector: 'editor',
    template: `<div id="tinyFormGroup" class="form-group">
    <div class="hidden">
        <textarea id="baseTextArea">{{htmlContent}}</textarea>
    </div>
</div>`,
    inputs: ['mceContent'],
    outputs: ['contentChanged']
})

// 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;
    private htmlContent: string;

    public contentChanged: EventEmitter<any>;

    constructor(@Inject(ElementRef) elementRef: ElementRef)
    {
        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);

        //Attach tinyMCE to cloned textarea
        tinymce.init(
            {
                mode: 'exact',
                height: 500,
                theme: 'modern',
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    '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.htmlContent = content;
    }
}

Answer 1

id为“this.elementID”的

元素不存在，而且elem = null，而不是HTMLElement

var elem = document.getElementById(this.elementID);

Angular 2中的TInyMce

1 个答案: