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

Question

我正在尝试向 quill.js 添加自定义功能（“模块”），但似乎无法做到。这是我需要的：

如果想添加一个插入模板替换变量的按钮...在编辑器中的光标位置说类似 {{company}} 的内容，目前是否可以使用 API - 我想我可以使用 insertText 但是我似乎无法让它工作。

谢谢

Answer 1

我最终在一个非常相似的设置中做了什么：

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

Answer 2

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

Answer 3

此代码片段是使用 Quill.js 使用自定义按钮在光标位置添加符号。

首先声明 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);
});