错误:TypeError:_co.keyupHandler不是使用tinymce的Angular 4中的函数

时间:2017-10-30 08:51:48

标签: angular tinymce

我按照本指南https://go.tinymce.com/blog/angular-2-and-tinymce/编辑了,但是当我在编辑器中输入任何内容时出现此错误:

" TypeError:_co.keyupHandler不是函数"。

如果我评论这部分..

    // editor.on('keyup change', () => {
    //   const content = editor.getContent();
    //   this.onEditorContentChange.emit(content);
    // });

..然后我没有收到任何错误,但在提交表单时,描述字段不会更新。我有一种感觉这是jquery代码,但我怎么能以角度方式做到这一点?还不确定是否正确注入了formControlName。它适用于app-tiny-editor,但它应该在textarea中吗? 它现在看起来如何:

enter image description here

这一切都非常令人困惑,希望有人可以提供帮助。 代码:

wysiwyg组件ts

import { FormControl } from '@angular/forms';
import { Component, AfterViewInit, EventEmitter, OnDestroy, Input, Output, ViewChild, ElementRef } from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
declare var tinymce: any;
@Component({
  selector: 'app-tiny-editor',
  template: `<textarea name="{{elementId}}" id="{{elementId}}"></textarea>`,

})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorContentChange = new EventEmitter();
  @Input() value: any;
  @Input() fcn: any;
  @Input() control: FormControl;
  @ViewChild('textarea') inputRef: ElementRef;

editor: any;
  // editor;

  ngAfterViewInit() {
    tinymce.init({
      init_instance_callback: (editor: any) => {
        // tslint:disable-next-line:no-unused-expression
        editor && this.value && editor.setContent(this.value);
        },     
      selector: '#' + this.elementId,
      plugins: ['link', 'table'],
      skin_url: '/assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      }

    });
    console.log('control',this.control);

  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
}

在im中调用它的组件:

   <app-tiny-editor [elementId]="'description'" name="description" 
        [control]="editEvent.controls['description']" 
        [fcn]="description" formControlName="description" 
        [value]="theevent.description"
          (onEditorContentChange)="keyupHandler($event)" ngDefaultControl>
          {{theevent.description}}
        </app-tiny-editor>

0 个答案:

没有答案