CODEWITHSUNDEEP
javascriptangularjs
t.Koudoro
t.Koudoro

Reputation: 51

cursor jump to top when writing inside textarea with tinymce angular2

I use tinymce in my angular2 project, and I have a problem. The Cursor back to the top when I'm writing and sometimes it's erase a part of the text. How can I resolve this problem ?

I use tinymce 4.53 and angular 2.1

my tinymce components

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

}

and html 

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

Upvotes: 4

Views: 2808

Answers (1)

monkey-0001
monkey-0001

Reputation: 482

There seems to be a conflict with the event emitter of angular and the keyup event of tinymce. Since I do not need any real-time updating of the content, I can solve the problem for myself by triggering the event emitter only at the change event of tinymce. So, change 'keyup' to 'blur'. This looks as follows:

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

Upvotes: 4

Related Questions