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

【问题标题】：Cursor position in quill Editor羽毛笔编辑器中的光标位置
【发布时间】：2019-11-27 13:33:43
【问题描述】：

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

我尝试使用 (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)">

【问题讨论】：

标签： angular angular7 quill ngx-quill

【解决方案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

【讨论】：