Я хочу разместить экземпляр 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
}
}
Итак, сейчас у меня есть следующие три основные проблемы:
- Содержимое
tinyMCE
недоступно для редактирования
- Понятия не имею, как привязать содержимое к
ngModel
- в частности к myEntity.textHTML
- Иногда не удается загрузить настройки, иногда нет. Я полагаю, это какое-то время.
Есть ли рабочий код, как использовать tinyMCE
на mat-tab-group
?