Add a custom button to the Quill's toolbar (and integrate it also on the PrimeFaces Text Editor)?

I am using PrimeFaces 7 and its TextEditor component, which uses internally the free and open-source editor Quill

I need to add a custom HTML button, which, when selected, inserts the word selected on the current position of the cursor in the TextEditor - (in the Quill)

It is possible to add custom buttons in the Quill Editor and to attach EventListeners to them, as shown here:

https://quilljs.com/docs/modules/toolbar/

(Please look at this part of the above page):

var customButton = document.querySelector('#custom-button'); customButton.addEventListener('click', function() { console.log('Clicked!'); });

There is also an API provided by the Quill editor to insert text at a given position, see here:

https://quilljs.com/docs/api/#content

have a look at this mehod:

`quill.insertText(0, 'Hello', 'bold', true);`

However, I do miss a couple of things:

1.) The definition of the custom-button shall be done in the toolbar div, as specified in the following code:

`<div id="toolbar">
   <!-- But you can also add your own -->
  <button id="custom-button"></button>`

However: how could I do that, when using ready PrimeFaces Text Editor component?

I locally tried this:

jQuery(document).ready(function () {
    jQuery(document).ready(function () {
        var customButton = document.getElementById("resultsFormId:quillToolbarId_toolbar:custButId");
        if (customButton!=null){
            return;
        }

        customButton = document.createElement("button");
        customButton.innerHTML = 'Params';
        customButton.id="resultsFormId:quillToolbarId_toolbar:custButId";

        var qlTollbar = document.getElementById("resultsFormId:quillToolbarId_toolbar");

        qlTollbar.appendChild(customButton);

        customButton.addEventListener('click', function() {
            Quill.insertText(0, 'Hello', 'bold', true);
            console.log('Clicked!');
        });
    });
    }); 

and could say the following:

1.1) The custom button gets inserted on the Quill toolbar (is not nice and styled, but it is there)

1.2) When I click the custom button, first the EventListener gets executed. This is OK,but here:

Quill.insertText(0, 'Hello', 'bold', true);

instead of Quill.insertText()., I need a reference to the js-object representing the Quill editor. === > Could you help?

1.3) after the EventListener from Point (1.2) gets executed, my whole code under

 jQuery(document).ready(function () {
    jQuery(document).ready(function () {

gets executed once again, the id of the customButton is not found, and it is recreated once again. ===> Could I avoid that?

2.) In the code for the insertion of a text on a specific position, I need to get the last position the cursor was, before the user clicked (selected the option on the) custom button.

How can I do that?