javascript - 使用tinymce angular2在textarea内书写时光标跳到顶部

Question

我在我的 angular2 项目中使用 tinymce，但我遇到了问题。当我写作时，光标回到顶部，有时它会删除部分文本。我该如何解决这个问题？

我使用 tinymce 4.53 和 angular 2.1

我的 tinymce 组件

declare var tinymce: any;

@Component({
  selector: 'simple-tiny',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleTinyComponent implements AfterViewInit, OnDestroy {

  @Input() elementId: string;
  @Input() profile: string;
  @Input() content: string;
  @Output() onEditorChange = new EventEmitter<any>();
  @Output() onEditorKeyup = new EventEmitter<any>();


  public editor;
  public profiles: Object = {
    // Used by the shop global settings component
    simple1: {
      menubar: false,
      plugins: ['autoresize', 'link', 'paste'],
      toolbar: 'bold italic underline removeformat | link unlink | bullist numlist indent outdent',
      autoresize_min_height: 150,
      autoresize_bottom_margin: 20
    },
    simple2: {
      menubar: false,
      plugins: ['autoresize', 'link', 'paste'],
      toolbar: 'bold italic underline removeformat | link unlink | bullist numlist indent outdent',
      autoresize_min_height: 150,
      autoresize_bottom_margin: 20
    }
  }

  constructor(private helpersService:HelpersService) {}

  ngAfterViewInit() {
    tinymce.init(_.defaults({}, this.profiles[this.profile], {
      selector: '#' + this.elementId,
      plugins: ['link', 'paste', 'table'],
      elementpath: false,
      paste_as_text: true,
      skin_url: '/assets/skins/lightgray',
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          const content = editor.getContent();
          this.onEditorKeyup.emit(content);
        });
        editor.on('change', () => {
          this.onEditorChange.next(editor.getContent());
        });
        editor.on('init', () => {
          this.editor.setContent(this.content);
        });
      },
    }));


  }

  ngOnChanges() {
    if (this.editor) {
      this.editor.setContent(this.content);
    }
  }

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

}

和 html

<simple-tiny [elementId]="'freeHours'" [profile]="'simple1'" [content]="contentFreeHours"  (onEditorChange)="contentFreeHours=$event">
                    </simple-tiny>

Answer 1

似乎与angular的事件发射器和tinymce的keyup事件有冲突。由于我不需要任何内容​​的实时更新，我可以通过仅在tinymce的更改事件触发事件发射器来为自己解决问题。因此，将“keyup”更改为“blur”。这看起来如下:

setup: editor => {
    editor.on('blur', () => {
        const content = editor.getContent();
        this.onEditorKeyup.emit(content);
    });
}