Insert text at cursor position using Quill.js

Question

I am trying to add a custom piece of functionality ("module") to quill.js and cannot do this. This is what I need:

If you want to add a button that inserts a template replacement variable ... let's say something like {{company}} at the cursor location in the editor, this is what is currently possible with the API - I thought I could do it using insertText, but I can't get it to work.

thank

Answer 1

You should be able to do this with insertText, but you may need to use getSelection to get the cursor location. The object returned by getSelection will have an index key and a length. Adding a button and the necessary click handler depends on the developer. Note that focus must be returned back to the editor before calling getSelection using focus or just passing true to getSelection.

Answer 2

What I ended up in a very similar setting:

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

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);
});