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

admin管理员组

文章数量:1030959

I am using PrimeFaces 7 and its TextEditor ponent, 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:

/

(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:

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 ponent?

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?

I am using PrimeFaces 7 and its TextEditor ponent, 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./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./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 ponent?

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?

• javascript
• primefaces
• quill

Share Improve this question Follow edited May 20, 2020 at 7:24 Kukeltje 12.3k44 gold badges2626 silver badges4747 bronze badges asked May 19, 2020 at 15:28 Alex MiAlex Mi 1,45933 gold badges2525 silver badges4646 bronze badges 5

• I think you need to do a feature request or submit a PR with something like primefaces.github.io/primefaces/8_0/#/ponents/… – Jasper de Vries Commented May 19, 2020 at 15:39
• 1 or check if overriding some javascript file works... – Kukeltje Commented May 19, 2020 at 16:19
• @Kukeltje I did a small test, put my results in my quesiton above. Could you help me with points (1.2) and (1.3) (see my edited question above) Thank you! – Alex Mi Commented May 20, 2020 at 6:40
• 1 Did you read the fine manuals? The PrimeFaces ones (showcase and documentation) about customization? At least a part of your problem of technically adding a custom button, making lots of the javascript superfluous. And you effectively added multiple questions here making hard to ment. 1.2 1.3 and 2 are not going to be addressed by me because of this and since they are purely Quill and in no way PF related. Better to split into multiple ones but lets focus on the 1.1 first. That can be done way simpler. Styling might be up to you by adding the relevant classes etc... – Kukeltje Commented May 20, 2020 at 7:34
• What's the point of adding jQuery(document).ready(function () twice? Isn't that the problem of you double-trigger? – Martin Schilliger Commented May 23, 2020 at 13:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

I am using PrimeFaces 7 and its TextEditor ponent, 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:

/

(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:

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 ponent?

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?

I am using PrimeFaces 7 and its TextEditor ponent, 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./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./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 ponent?

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?

• javascript
• primefaces
• quill

Share Improve this question Follow edited May 20, 2020 at 7:24 Kukeltje 12.3k44 gold badges2626 silver badges4747 bronze badges asked May 19, 2020 at 15:28 Alex MiAlex Mi 1,45933 gold badges2525 silver badges4646 bronze badges 5

• I think you need to do a feature request or submit a PR with something like primefaces.github.io/primefaces/8_0/#/ponents/… – Jasper de Vries Commented May 19, 2020 at 15:39
• 1 or check if overriding some javascript file works... – Kukeltje Commented May 19, 2020 at 16:19
• @Kukeltje I did a small test, put my results in my quesiton above. Could you help me with points (1.2) and (1.3) (see my edited question above) Thank you! – Alex Mi Commented May 20, 2020 at 6:40
• 1 Did you read the fine manuals? The PrimeFaces ones (showcase and documentation) about customization? At least a part of your problem of technically adding a custom button, making lots of the javascript superfluous. And you effectively added multiple questions here making hard to ment. 1.2 1.3 and 2 are not going to be addressed by me because of this and since they are purely Quill and in no way PF related. Better to split into multiple ones but lets focus on the 1.1 first. That can be done way simpler. Styling might be up to you by adding the relevant classes etc... – Kukeltje Commented May 20, 2020 at 7:34
• What's the point of adding jQuery(document).ready(function () twice? Isn't that the problem of you double-trigger? – Martin Schilliger Commented May 23, 2020 at 13:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签：