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

Question

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

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

可以在Quill编辑器中添加自定义按钮，并为其附加EventListeners，如图所示。

https:/quilljs.comdocsmodulestoolbar

请看上页的这部分内容）。

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

Quill编辑器还提供了一个API，用于在指定位置插入文本，请看这里。

https:/quilljs.comdocsapi#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()，而是代表Quill编辑器的js-object的引用。

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

我需要一个代表Quill编辑器的js对象的引用，而不是Quill.insertText().

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

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

===> 我可以避免这种情况吗？

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

我如何才能做到这一点？

Answer 1

我从来没有听说过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();