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当编辑器不自动加载时如何将焦点设置到编辑器

回答

相关问题