Question

我正在使用ng2-ckeditor插件。使用记录的方式设置焦点（即on startup）不起作用，因为我使用* ngIf在用户单击按钮时显示编辑器。

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

所以startupFocus配置选项显然不起作用，因为此时ckeditor实际上并不在DOM中。

我也尝试使用[hidden]，因为当我的Component初始化时，编辑器在DOM中，但当然编辑器不可见，因此无论如何都无法获得焦点。

然后我发现当编辑器实际可见并准备好进行用户交互时，我可以触发一个就绪事件，如下所示：

  <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();
  }

这是我第一次尝试时工作。现在，因为我已经重新加载应用程序，它不再有效......是吗？

Answer 1

以上答案对我不起作用。因此我找到了this thread。简短的答案，请使用$event.editing.view.focus()。

在我的情况下，很长的答案，我需要延迟创建editor元素，直到用户单击wrapping元素（以提高性能）为止。在用户单击之后，便创建了编辑器（用户不知道，他只是单击“看起来”好像是一个编辑器的区域）。

所以您在html中要做的是

    <ckeditor
      [editor]="editor"
      (ready)="onEditorReady($event)"
      data=""
      name="text">
    </ckeditor>

和代码

  onEditorReady($event: any) {
    $event.editing.view.focus();
  }

无需超时。另外请注意，我们不使用editor实例，而是使用$event实例。

$event.editing.view对象原型是focus（）函数所在的位置。它也是一个对象，您可以查找需要以编程方式进行的任何高级操作。例如，您可以执行$event.editing.view.destroy()。这将破坏ckeditor，但仍将创建常规的旧textarea元素。尚不确定这在哪里有用，但确实有用。

Answer 2

这可能适用于某些人：

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

但是编辑器需要加载大约500-1000毫秒。所以将焦点调用包装在一个计时器中：

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

但是，在我的情况下，用户可以通过单击按钮来显示或隐藏编辑器。由于onReady事件只在DOM实际就绪时触发（因为它是配置选项的一部分），所以它只触发一次。

因此需要一个更有创意的解决方案。

首先，我在组件中创建了一个私有变量，用于将ref存储到编辑器中：

private ckEditor：any;

然后，当onReady第一次触发时，我将引用存储到ckEditor实例：

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

现在，当我的用户点击显示编辑器的按钮时：

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

我可以在每次显示时设置焦点！好极了！：）

请注意，这里的计时器可以快得多，因为当用户点击我的编辑按钮（触发此方法）时，DOM就完全加载了（就像ckeditor插件一样）。

ng2-ckeditor当编辑器未自动加载时，如何将焦点设置到编辑器

2 个答案: