将自定义按钮添加到 Quill 的工具栏（并将其也集成到 PrimeFaces 文本编辑器中）？

Question

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

我需要添加一个自定义HTML按钮，在选择时，将其插入在TextEditor中的游标的当前位置上选择的单词 - （在Quill）

中

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

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

（请看上面页面的这部分）：

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

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

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

看看这个方法：

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

但是，我确实错过了一些事情：

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

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

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

我在本地试过这个：

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!');
        });
    });
    }); 

并且可以说：

1.1) 自定义按钮被插入到 Quill 工具栏上（不是很好和样式，但它在那里）

1.2) 当我单击自定义按钮时，首先会执行 EventListener。这没关系，但在这里：

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

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

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

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

再次执行，未找到customButton的id，并再次重新创建。 ===> 我可以避免吗？

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

我该怎么做？

Answer 1

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

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

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

根据the code on GitHub应该是

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

你能确认一下吗？然后你也应该能够得到光标位置和选择（如果有的话）

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