ng2-ckeditor So stellen Sie den Fokus auf den Editor ein, wenn der Editor NICHT automatisch geladen wird

Question

Ich verwende das ng2-ckeditor-Plugin. Die Verwendung der dokumentierten Methode zum Festlegen des Fokus (z. B. on startup) funktioniert nicht, da ich * ngIf verwende, um den Editor anzuzeigen, wenn der Benutzer auf eine Schaltfläche klickt.

this.ckConfig = { 
    uiColor: '#F0F3F4', 
    height: '350', 
    extraPlugins: 'divarea', 
    startupFocus: true 
}; 

So ist die startupFocus Konfigurationsoption nicht funktioniert, offensichtlich, da der ckeditor an dieser Stelle nicht eigentlich in dem DOM ist.

Ich habe auch versucht mit [versteckt] seit dann der Editor ist im DOM, wenn meine Komponente initialisiert, aber natürlich ist der Editor nicht sichtbar, so kann es nicht den Fokus trotzdem erhalten.

Dann entdeckte ich, ich kann ein fertiges Ereignis ausgelöst, wenn der Editor tatsächlich sichtbar und bereit für die Interaktion mit dem Benutzer ist, etwa so:

<div *ngIf="isEditMode"> 
    <ckeditor id="ckeditor" 
     [(ngModel)]="letterhead" 
     [config]="ckConfig" 
     (ready)="onReady($event)" 
     debounce="500"> 
    </ckeditor> 
    </div> 

aber wie im onReady Fall kann ich den Fokus gesetzt?

EDIT

Nachdem in den Innereien von CKEditor graben, fand ich, dass ich dies in meinem onReady Event-Handler einfach tun können:

onReady(event: any){ 
    event.editor.focus(); 
    } 

dies das erste Mal habe ich es versucht. Jetzt, da ich die App neu geladen habe, funktioniert es nicht mehr ... wth?

Answer 1

Dies könnte für einige arbeiten:

onReady(event: any){ 
    event.editor.focus(); 
    } 

aber es dauert den Editor über 500-1000s Millisekunden zu laden. Umschließen Sie also den Fokusaufruf in einem Timer:

onReady(event: any){ 
    setTimeout(() => event.editor.focus(), 1000); 
    } 

In meiner Situation kann der Benutzer den Editor jedoch anzeigen oder ausblenden, indem er auf eine Schaltfläche klickt. Da das onReady-Ereignis nur dann ausgelöst wird, wenn das DOM tatsächlich bereit ist (da es Teil der Konfigurationsoptionen ist), wird es nur einmal ausgelöst.

Daher ist eine kreativere Lösung erforderlich.

Zuerst habe ich eine private Variable in meiner Komponente einen ref an den Editor zu speichern:

Privat CKEditor: any;

dann, wenn die onReady das erste Mal feuert, speichere ich den Verweis auf die CKEditor Beispiel:

onReady(event: any){ 
    this.ckEditor = event.editor; 
    } 

Nun, wenn mein Benutzer auf die Schaltfläche klickt, um den Editor zeigt:

onClickEditButton(){ 
    this.isEditMode = true; 
    this.isShowEditButton = false; 
    setTimeout(() => this.ckEditor.focus(), 250); 
    } 

Ich kann den Fokus jedes Mal einstellen, wenn es gezeigt wird! Yay! :)

Beachten Sie, dass der Timer hier viel schneller sein kann, da der Benutzer zu dem Zeitpunkt auf meine Schaltfläche Bearbeiten (die diese Methode auslöst) klicken kann, ist das DOM vollständig geladen (wie das Ckeditor-Plugin).