Угловая мат-таб-группа и tinyMCE - PullRequest
0 голосов
/ 11 июля 2019

Я хочу разместить экземпляр tinyMCE в группе вкладок. На одной вкладке у меня есть tinyMCE, на другой - просто обычный textarea. Переключение вкладок приводит к сбою в tinyMCE, и содержимое больше не может быть отредактировано - если tinyMCE отображается вообще. В поисках решения я придумываю следующее:

  <mat-tab-group animationDuration="0ms" (selectedIndexChange)="unloadTinyMce($event)"
      (animationDone)="updateEditor()">
      <mat-tab label="HTML Cover">
        <editor id="tinyMCE" [init]="tinyMceSettings.defaultWithInlineImages" [ngModelOptions]="{standalone: true}"
          [(ngModel)]="myEntity.textHtml"></editor>
      </mat-tab>
      <mat-tab label="PDF Cover">
        <mat-form-field appearance="outline">
          <mat-label i18n>Text for PDF</mat-label>
          <textarea matInput rows="10" i18n-placeholder="Text for PDF" placeholder="Text for PDF"
            [(ngModel)]="myEntity.textText"> </textarea>
        </mat-form-field>
      </mat-tab>
    </mat-tab-group>

Так что, в основном, следуя различным советам, я должен выгрузить tinyMCE при переключении вкладки и загрузку при переключении обратно. Когда анимация заканчивается, контент перезагружается. Я понял, что он должен быть установлен на 0ms, иначе он не будет работать.

  unloadTinyMce(value): void {
    this.currentTabIndex = value;
    console.log('tab sel:' + value)
  }

  updateEditor() {
    console.log('finished animation ')
    if (this.currentTabIndex == 0) {
      const settings = Object.assign({}, TinyMceSettings.defaultWithInlineImages, { selector: '#tinyMCE' });
      tinymce.init(settings)
    } else {
      tinymce.remove('tinyMCE'); //the id of your textarea
    }
  }

Итак, сейчас у меня есть следующие три основные проблемы:

  1. Содержимое tinyMCE недоступно для редактирования
  2. Понятия не имею, как привязать содержимое к ngModel - в частности к myEntity.textHTML
  3. Иногда не удается загрузить настройки, иногда нет. Я полагаю, это какое-то время.

Есть ли рабочий код, как использовать tinyMCE на mat-tab-group?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...