将自定义按钮添加到 Quill 的工具栏(并将其也集成到 PrimeFaces 文本编辑器中)? [英] Add a custom button to the Quill's toolbar (and integrate it also on the PrimeFaces Text Editor)?

问题描述

我正在使用 PrimeFaces 7 及其 TextEditor 组件，该组件在内部使用免费和开源的编辑器 Quill

我需要添加一个自定义HTML按钮，在选择时，该按钮将在TextEditor中的光标的当前位置中选择选择的单词 - (在Quill)

中

可以在 Quill 编辑器中添加自定义按钮并将 EventListeners 附加到它们，如下所示:

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

(请看上页的这一部分):

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

Quill 编辑器还提供了一个 API，用于在给定位置插入文本，请参见此处:

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

看看这个方法:

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

但是，我确实想念一些事情:

1.) 自定义按钮的定义应在工具栏 div 中完成，如以下代码所示:

`
<!-- 但您也可以添加自己的 --><button id="custom-button"></button>`

但是:当使用现成的 PrimeFaces 文本编辑器组件时，我该怎么做?

我在本地尝试过这个:

jQuery(document).ready(function () {jQuery(文档).ready(函数(){var customButton = document.getElementById("resultsFormId:quillToolbarId_toolbar:custButId");如果(自定义按钮！=空){返回;}customButton = document.createElement("button");customButton.innerHTML = '参数';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('点击！');});});});

并且可以说以下内容:

1.1) 自定义按钮被插入到 Quill 工具栏上(不美观和样式化，但它在那里)

1.2) 当我单击自定义按钮时，首先执行 EventListener.这没问题，但在这里:

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

而不是 Quill.insertText()，我需要一个对代表 Quill 编辑器的 js 对象的引用.=== > 你能帮忙吗?

1.3) 来自 Point (1.2) 的 EventListener 被执行后，我的整个代码在

 jQuery(document).ready(function () {jQuery(文档).ready(函数(){

再次执行，没有找到customButton的id，再次重新创建.===> 我能避免这种情况吗?

2.) 在用于在特定位置插入文本的代码中，我需要在用户单击(选择)自定义按钮之前获取光标所在的最后一个位置.

我该怎么做?

解决方案

我从未听说过 PrimeFaces，但也许我可以回答你的这一部分问题:

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

<块引用>

而不是 Quill.insertText()，我需要一个对代表 Quill 编辑器的 js 对象的引用.=== > 你能帮忙吗?

根据GitHub 上的代码应该是

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

你能确认一下吗?然后你也应该能够用

获取光标位置和选择(如果有的话)

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

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?

解决方案

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

这篇关于将自定义按钮添加到 Quill 的工具栏(并将其也集成到 PrimeFaces 文本编辑器中)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！