PrimeFaces 7 TextEditor集成Quill自定义工具栏按钮问题求助

我来帮你一步步搞定这几个问题，这些坑我之前做类似需求时也踩过，给你整理了实用的解决方案：

一、避免重复创建自定义按钮 #

你之前的代码嵌套了两层jQuery(document).ready()，而且判断逻辑有点问题，导致会重复创建按钮。这里调整逻辑，先检查按钮是否已存在，再创建，同时给按钮加上Quill原生样式，解决美观问题：

jQuery(document).ready(function () {
    const customButtonId = "resultsFormId:quillToolbarId_toolbar:custButId";
    let customButton = document.getElementById(customButtonId);
    
    // 已存在则直接返回，避免重复创建
    if (customButton) {
        return;
    }

    // 创建按钮并添加Quill工具栏原生样式
    customButton = document.createElement("button");
    customButton.innerHTML = 'Params';
    customButton.id = customButtonId;
    customButton.classList.add('ql-button'); // 让按钮样式和Quill原生按钮统一

    // 插入到工具栏容器
    const qlToolbar = document.getElementById("resultsFormId:quillToolbarId_toolbar");
    qlToolbar.appendChild(customButton);

    // 后续绑定点击事件...
});

二、获取Quill编辑器实例引用 #

PrimeFaces的TextEditor会把Quill实例绑定在组件的客户端对象上，最可靠的两种方式：

方式1：通过WidgetVar获取（推荐） #

先给你的TextEditor组件定义widgetVar属性：

<p:textEditor id="quillToolbarId" widgetVar="myQuillWidget" .../>

然后在JS中获取Quill实例：

const quillWidget = PF('myQuillWidget'); // PF()是PrimeFaces全局方法，传入widgetVar值
const quillInstance = quillWidget.quill; // 拿到真正的Quill实例

方式2：通过jQuery Data属性获取 #

如果没定义widgetVar，可以通过组件的客户端ID直接获取：

const quillInstance = jQuery('#resultsFormId:quillToolbarId').data('quill');

三、获取光标位置并插入文本 #

Quill提供getSelection()方法获取当前光标或选中区域的位置，返回的对象包含index（光标起始位置）和length（选中长度）。用这个index作为插入位置即可：

customButton.addEventListener('click', function() {
    // 获取Quill实例（替换成你的widgetVar）
    const quillWidget = PF('myQuillWidget');
    if (!quillWidget || !quillWidget.quill) {
        console.error('无法获取Quill编辑器实例');
        return;
    }
    const quill = quillWidget.quill;

    // 获取光标/选中区域信息
    const selection = quill.getSelection();
    if (!selection) {
        // 未找到光标，默认插入到开头
        quill.insertText(0, 'Params: ', 'bold', true);
        return;
    }

    // 插入自定义文本到光标位置
    const customText = '你的自定义参数内容';
    quill.insertText(selection.index, customText, 'bold', true);
    
    // 插入后把光标移到文本末尾，提升用户体验
    quill.setSelection(selection.index + customText.length);
});

四、完整整合代码 #

把所有部分整合起来，就是可以直接用的代码：

jQuery(document).ready(function () {
    const customButtonId = "resultsFormId:quillToolbarId_toolbar:custButId";
    let customButton = document.getElementById(customButtonId);
    
    if (customButton) return;

    customButton = document.createElement("button");
    customButton.innerHTML = 'Params';
    customButton.id = customButtonId;
    customButton.classList.add('ql-button');

    const qlToolbar = document.getElementById("resultsFormId:quillToolbarId_toolbar");
    qlToolbar.appendChild(customButton);

    customButton.addEventListener('click', function() {
        const quillWidget = PF('myQuillWidget');
        if (!quillWidget?.quill) {
            console.error('Quill实例获取失败');
            return;
        }
        const quill = quillWidget.quill;

        const selection = quill.getSelection();
        const insertPos = selection ? selection.index : 0;
        const insertText = '自定义参数文本';
        
        quill.insertText(insertPos, insertText, 'bold', true);
        quill.setSelection(insertPos + insertText.length);
    });
});

额外提示 #

如果你的页面用AJAX更新TextEditor，要把这段代码放到AJAX的oncomplete回调里，或者用PrimeFaces的全局AJAX监听，避免更新后按钮消失或重复创建。

内容的提问来源于stack exchange，提问作者Alex Mi