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

Question

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

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

这在我第一次尝试时有效。 现在自从我重新加载应用程序它不再工作......wth？

Answer 1

上面的答案对我不起作用。 所以我找到了这个线程。 简短的回答，使用$event.editing.view.focus() 。

长答案，就我而言，我需要延迟创建编辑器元素，直到用户单击包装元素（以提高性能）。 用户点击后，编辑器就被创建了（用户并不知道，他只是点击了一个“看起来”好像有一个编辑器的区域）。

所以你必须在 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 实际准备好时才会触发（因为它是配置选项的一部分），所以它只会触发一次。

因此，需要更具创造性的解决方案。

首先，我在组件中创建了一个私有变量来存储对编辑器的引用：

私人ckEditor：任何；

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

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

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

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

每次显示时我都可以设置焦点！ 耶！ :)

请注意，这里的计时器可以更快，因为当用户可以单击我的“编辑”按钮（触发此方法）时，DOM 已完全加载（与 ckeditor 插件一样）。