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

似乎与角度的事件发射器和tinymce的keyup事件存在冲突。由于我不需要对内容进行任何实时更新，因此我可以通过仅在tinymce的更改事件中触发事件发射器来为自己解决问题。所以，改变关键词＆＃39;到了＆＃39;模糊＆＃39;。这看起来如下：

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

使用tinymce angular2在textarea中写入时，光标跳到顶部

1 个答案: