Question

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

我需要添加一个自定义HTML按钮，该按钮在被选中时会在TextEditor-（在鹅毛笔中）的光标的当前位置插入选定的单词

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

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

（请查看上一页的这一部分）：

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

“鹅毛笔”编辑器还提供了一个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）自定义按钮被插入到“羽毛笔”工具栏上（虽然样式不好，但确实存在）

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

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

1 个答案: