集成PrimeFaces Editor到JSF应用时遇Uncaught TypeError错误求助

问题场景 #

在现有JSF应用中集成PrimeFaces 6.1的Editor组件时，出现JavaScript报错，编辑器无法正常渲染。

相关代码 #

<html>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<t:div rendered="#{model.mimeType == 'application/rtf'}" forceId="true" id="rtfEditor">
    <p:editor id="editor" widgetVar="editorWidget" value="#{editorView.text}" width="1000" height="500" />
</t:div>
</html>

错误信息 #

Uncaught TypeError: Cannot read properties of null (reading 'css')
    at HTMLDocument.<anonymous> (jquery-plugins.js.xhtml?ln=primefaces&v=6.1:337:9081)
    at i (jquery.js.xhtml?ln=primefaces&v=6.1:25:25791)
    at Object.fireWith [as resolveWith] (jquery.js.xhtml?ln=primefaces&v=6.1:25:26797)
    at Function.ready (jquery.js.xhtml?ln=primefaces&v=6.1:25:28871)
    at HTMLDocument.bY (jquery.js.xhtml?ln=primefaces&v=6.1:25:29263)

使用版本 #

• JDK: 8
• JSF: 2.2
• PrimeFaces: 6.1

已确认jQuery与PrimeFaces插件绑定，仍出现该错误。

解决方案 #

1. 移除手动引入的jQuery：PrimeFaces会自动加载适配版本的jQuery，手动引入易引发版本冲突或加载顺序问题，直接删除<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />这一行。

2. 规范页面JSF结构：确保页面包含完整的<h:head>和<h:body>标签，PrimeFaces资源依赖正确的页面结构才能正常加载，修改后示例：

<h:html>
    <h:head>
        <!-- 无需手动引入jQuery -->
    </h:head>
    <h:body>
        <t:div rendered="#{model.mimeType == 'application/rtf'}" forceId="true" id="rtfEditor">
            <p:editor id="editor" widgetVar="editorWidget" value="#{editorView.text}" width="1000" height="500" />
        </t:div>
    </h:body>
</h:html>

3. 替换条件渲染容器：改用PrimeFaces原生的<p:outputPanel>替代<t:div>，PrimeFaces组件对条件渲染的JS初始化支持更稳定，示例：

<p:outputPanel rendered="#{model.mimeType == 'application/rtf'}" id="rtfEditor">
    <p:editor id="editor" widgetVar="editorWidget" value="#{editorView.text}" width="1000" height="500" />
</p:outputPanel>

4. 清空浏览器缓存：旧资源缓存可能导致冲突，清空缓存后重新加载页面。

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