羽毛笔编辑器中的光标位置

Question

我正在使用 Angular 7 和 quill 编辑器。用例：我有羽毛笔编辑器，需要在双击任何按钮时附加一些文本，获取双击的值但无法获得羽毛笔编辑器内的光标位置。

我尝试使用 (onContentChanged)、(onEditorCreated) 和 (onSelectionChanged)，还尝试使用 onFocus，因为我必须在一个模板中使用多个羽毛笔编辑器。

只需要将文本附加到焦点编辑器上，但仅附加到光标位置。

这是我的代码示例

<quill-editor #editor [maxLength]="maxLength"
          [minLength]="minLength"
          [modules]="quillConfig"
          [(ngModel)]="text"
          (onContentChanged)="contentchanged($event)"
          (onEditorCreated)="editorCreated($event)"
          [placeholder]="placeholder"
          [readOnly]="readonly"
          [required]="required"
          [style]="{height: height}"
          (onSelectionChanged)="onFocus($event)">

Answer 1

您可以使用 quill 编辑器的 insertText 方法来完成此操作。这是一个在光标位置插入 ABCD 的简单实现：

const selection = this.editor.getSelection(); // get position of cursor (index of selection)
this.editor.insertText(selection.index, 'ABCD'); // insert text into the cursor position

完整示例： https://stackblitz.com/edit/angular-ffkfhp

羽毛笔编辑器中的光标位置

Cursor position in quill Editor

quill

angular

angular7

ngx-quill