Inserting Text At Cursor Location With Quill.js

Question

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

If want to add a button that inserts a template replacement variable... say something like {{company}} at the location of the cursor in the editor, is that currently possible with the API - I thought I could do it using insertText but I cant seem to get it to work.

Thanks

score 25 · Answer 1 · answered Apr 16 '19 at 11:00

25

What I ended up doing in a very similar setup:

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

answered Apr 16 '19 at 11:00

Tikall

2,453
25
13

1

Can you please tell how to get access to `this._quill` in the component.ts file? – Prasad Patel May 16 '19 at 08:15
access your editor using @ViewChild('editor') editor:Editor and than use this.editor.getQuill(); to access quill – ghulam_ali Sep 07 '20 at 07:27

jhchen · Answer 2 · 2017-09-12T00:00:11.997

13

You should be able to do this with insertText but you might need to use getSelection to get the cursor location. The object returned by getSelection will have an index and length key. Adding the button and necessary click handler will be up to the implementor. Note focus should be returned back to the editor before calling getSelection with focus or simply passing true to getSelection.

edited Sep 12 '17 at 00:00

answered May 14 '14 at 18:30

jhchen

14,355
14
63
91

this works for normal text, but If I add `Data {{ }}` it shows in the editor but on reading the value from editor the value is `
D
`. Curly braces disappear. Thoughts ?? – iJade Aug 31 '21 at 05:06

score 5 · Answer 3 · answered Jul 29 '19 at 07:46

This code snippet is to add symbol at cursor position with a custom button with Quill.js.

First declare quill variable:

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

With button click event, add symbol at caret position.

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

score 0 · Answer 4 · answered Sep 29 '22 at 12:12

0

For any of you still having problems with this, know that if you have a bootstrap modal showing when trying to focus on the Quill to be able to use method getSelection(), you first need to close the modal before forcing focus on the quill instance.

answered Sep 29 '22 at 12:12

ajzbrun

113
1
12

Inserting Text At Cursor Location With Quill.js

4 Answers4