使用Quill.js在光标位置插入文本

Inserting Text At Cursor Location With Quill.js

本文关键字：位置 插入文本 光标 Quill js 使用      更新时间：2023-09-26

我试图添加一个自定义的功能块("模块")到奎尔.js，似乎无法做到这一点。下面是我需要的:

如果想添加一个按钮来插入一个模板替换变量…说中光标所在位置的{{company}}之类的内容编辑器，这是目前可能的API -我认为我可以做到它使用insertText，但我似乎不能让它工作。

谢谢

最后我做了一个非常相似的设置:

let mergeFieldText = '{{company}}';
var selection = this._quill.getSelection(true);
this._quill.insertText(selection.index, mergeFieldText);

您应该能够使用insertText来做到这一点，但您可能需要使用getSelection来获取光标位置。getSelection返回的对象将具有索引和长度键。添加按钮和必要的单击处理程序将取决于实现者。注意，在使用focus调用getSelection或简单地将true传递给getSelection之前，应该将焦点返回给编辑器。

这个代码片段是用来在光标位置用一个自定义按钮添加符号的。

首先声明quill变量:

var quill = new Quill('.editor', {
    theme: 'snow'
});

使用按钮单击事件，在插入符号位置添加符号。

$('.symbols').click(function(){
    quill.focus();
    var symbol = $(this).html();
    var caretPosition = quill.getSelection(true);
    quill.insertText(caretPosition, symbol);
});

对于那些仍然有问题的人来说，如果你有一个引导模态显示，当你试图聚焦在Quill上时，为了能够使用getSelection()方法，你首先需要关闭模态，然后再强制聚焦在Quill实例上。

相关文章：