angular - 羽毛笔编辑器中的光标位置
问题描述
我正在使用带有羽毛笔编辑器的 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)">
解决方案
您可以使用 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
推荐阅读
- python - 计算文件每一行中数字的平均值
- python - windll.user32.ReleaseDC 失败:返回 0
- python - 如何优化(也是 RAM 明智的)将单词从 PDF 保存到 Python 对象并稍后保存到数据库的代码?
- r - 如何在 Shiny 应用程序中将 corrplot 图保存为 PDF?
- javascript - 检查值是否是有效的 React Child
- soql - 带有使用 GROUP BY 和 HAVING 的子查询的 SOQL 查询引发未知错误
- go - golang频道死锁问题,我应该关闭频道吗
- regex - 使用 yq/sed/grep 提取与 YAML 中的正则表达式匹配的键值对
- r - 如何使用 dplyr 将具有不同值的两个不同行汇总为具有该总和的单行?
- python - 如何在 MongoDB 中设置集合名称