ng2-ckeditor當編輯器不自動加載時如何將焦點設置到編輯器

我正在使用ng2-ckeditor插件。使用記錄的方式設置焦點（即on startup）不起作用，因爲我使用* ngIf在用戶單擊按鈕時顯示編輯器。ng2-ckeditor當編輯器不自動加載時如何將焦點設置到編輯器

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

所以startupFocus配置選項不起作用，很明顯，因爲CKEditor的實際上不是在這一點上，DOM。

我也嘗試過使用[hidden]，因爲編輯器在我的組件初始化時處於DOM狀態，但編輯器當然不可見，因此無論如何都無法獲得焦點。

接着我發現當編輯器實際上是可見的，並準備用於用戶交互，像這樣我就可以觸發一個ready事件：

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

但如何，在OnReady事件，我可以設置焦點？

編輯

挖掘到的CKEditor的內臟後，我發現我可以簡單地做這在我的onReady事件處理程序：

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

這個工作我第一次嘗試。現在，因爲我已經重新加載應用程序，它不再有效... ...？

來源

2017-10-10 rmcsharry

這可能對一些工作：

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

但它需要大約500-1000s毫秒加載編輯器。因此，將焦點呼叫包裹在計時器中：

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

但是，在我的情況下，用戶可以通過單擊按鈕顯示或隱藏編輯器。由於onReady事件只會在DOM實際準備就緒時觸發（因爲它是配置選項的一部分），所以它只會觸發一次。

因此需要更有創意的解決方案。

首先，我創建了一個私有變量在我的組件來存儲裁判編輯：

私人CKEDITOR：任;

然後，當onReady觸發第一次，我存儲的參考CKEDITOR實例：

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

現在，當我的用戶點擊，顯示的編輯按鈕：

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

每次顯示時我都可以設置焦點！好極了！ :)

請注意，這裏的定時器可以更快，因爲當用戶點擊我的編輯按鈕（這會觸發此方法）時，DOM完全加載（和ckeditor插件一樣）。

來源

2017-10-10 19:38:05 rmcsharry

ng2-ckeditor當編輯器不自動加載時如何將焦點設置到編輯器

回答

相關問題