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?

回答1:

I never heard of PrimeFaces, but maybe I can answer this part of you question:

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?

According to the code on GitHub it should be

PrimeFaces.widget.TextEditor.editor.insertText(0, 'Hello', 'bold', true)

can you confirm? Then you should also be able to get the cursor location and selection (if any) with

PrimeFaces.widget.TextEditor.editor.getSelection();

来源：https://stackoverflow.com/questions/61894802/add-a-custom-button-to-the-quills-toolbar-and-integrate-it-also-on-the-primefa

标签

javascript

primefaces

quill