tinyMCE-Angular и плагин кода - привязка к событиям в модале

Question

Angular 7, используя tinyMCE-angular, и мы настроили его для использования плагина 'code'. Этот плагин (в нашем случае) вставляет кнопку [<>] в панель инструментов tinymce.

Когда вы нажимаете эту кнопку, открывается модальное окно.

Проблема, с которой я столкнулся, заключается в том, что у нас есть событие (onKeyUp), которое запускается при редактировании содержимого основного редактора tinymce, но не запускается при использовании модального кода, поскольку этот модал вставляет содержимое без использования (onKeyUp) событие.

HTML:

<editor [init]="tinyMceSettings" apiKey="{{tinyMceApiKey}}" id="_featureTabContent" [(ngModel)]="marketPlaceModel.featureContent"
                  (onKeyUp)="onEditorKeyUp('Features_Tab')"></editor>

Код компонента, который позволяет включить или отключить кнопку «Предварительный просмотр» под редактором tinymce.

  onEditorKeyUp(str) {
    if (this.marketPlaceModel.featureContent != null && this.marketPlaceModel.featureContent.length != 0) {
      this.disablePreviewBtns.featuresbtn = false;
      this.marketPlaceModel.featureTabValVisbile = false;
    }
    else {
      this.disablePreviewBtns.featuresbtn = true;
      this.marketPlaceModel.featureTabValVisbile = true;
    }

tinyMCE имеет триггеры событий (https://github.com/tinymce/tinymce-angular#event-binding), Я предполагаю, что могу каким-то образом использовать эти события (например, мы используем событие onKeyUp в настоящее время) для запуска того же события onEditorKeyUp(), но я не могу показаться чтобы заставить это работать. Есть ли какой-нибудь способ сделать это, который уже встроен в редактор tinymce, и я просто скучаю по нему?

Answer 1

ОК, поэтому мы решили исправить это, сделав следующее:

<editor [init]="tinyMceSettings" apiKey="{{tinyMceApiKey}}" id="_featureTabContent" [(ngModel)]="marketPlaceModel.featureContent"
                  (onKeyUp)="onEditorKeyUp('Features_Tab')" (onDirty)="onEditorKeyUp('Features_Tab')"></editor>

Добавление вызова onDirty успешно обновляет кнопку при изменении класса с ng-pristine на ng-dirty. Однако если вы затем удалите все содержимое, оно не будет обновлять поле до тех пор, пока не будет нажата кнопка. Чтобы исправить это, мы обновили метод:

  onEditorKeyUp(str) {
    if (this.marketPlaceModel.featureContent != null && this.marketPlaceModel.featureContent.length != 0) {
      this.ref.detectChanges();
      this.disablePreviewBtns.featuresbtn = false;
      this.marketPlaceModel.featureTabValVisbile = false;
    }
    else {
      this.disablePreviewBtns.featuresbtn = true;
      this.marketPlaceModel.featureTabValVisbile = true;
    }

Это исправило проблему для нас.