Primefaces v10：如何设置<p:textEditor>不可调整大小及最大长度

AI 小北

2026-7-4

PrimeFaces 10 <p:textEditor> 禁用调整大小与最大输入长度解决方案

一、禁用编辑器调整大小

PrimeFaces的<p:textEditor>基于Quill编辑器，可通过两种方式禁用其调整大小功能：

方法1：CSS强制禁用

直接给编辑器容器添加样式，隐藏右下角的调整手柄：

.ui-editor .ql-container {
    resize: none !important;
}

将上述CSS添加到页面样式表或<style>标签中即可生效。

方法2：Quill配置禁用

利用<p:textEditor>的config属性传递Quill配置参数，关闭调整大小模块：

<p:textEditor widgetVar="myEditor" 
              config="{ modules: { toolbar: [['bold', 'italic']], resize: false } }" />

resize: false会直接禁用Quill编辑器的调整大小功能，同时可在toolbar中自定义需要的工具按钮。

二、设置最大输入长度

<p:textEditor>无原生maxlength属性，需通过监听Quill文本变更事件实现长度限制：

实现步骤

给编辑器指定widgetVar以便获取实例：

<p:textEditor widgetVar="myEditor" />

添加JavaScript监听文本变更事件，限制输入长度：

$(document).ready(function() {
    const quill = PF('myEditor').getQuill();
    const maxLength = 500; // 自定义最大输入长度

    quill.on('text-change', function(delta, oldDelta, source) {
        if (source === 'user') { // 仅处理用户主动输入
            const textLength = quill.getText().trim().length;
            if (textLength > maxLength) {
                const limitedText = quill.getText().substring(0, maxLength);
                quill.setText(limitedText);
                quill.setSelection(maxLength, 0); // 将光标定位到末尾
            }
        }
    });
});