javascript - CSS 和 Javascript 不适用于从 h :outputText with escape ="false" 呈现的内容

Question

从带有 escape="false"的 h:outText 呈现的内容未绑定(bind)到适用于该页面的 css 或 javascript。实际上，我正在尝试使用语法荧光笔在帖子中突出显示我的语法。该帖子存储在数据库中，并通过将 escape 属性设置为 false 将其显示在带有 h:outputText 标签的 JSF 页面中。它按预期呈现页面，处理所有 html 标记，但不应用适用于该帖子中代码块的 css 或 javascript。下面是我的 jsf 页面，它从数据库中检索 html 并通过 h:outputText 标签显示它。检索到的内容具有需要突出显示的语法。

   <ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        template="/templates/ui.xhtml">

 <ui:define name="head">
    <title>tekBytes-#{tutorialController.tut.title}</title>

<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link href="/rainbow/themes/pastie.css" rel="stylesheet" type="text/css" />
<script src="/rainbow/rainbow.min.js"></script>
<script src="/rainbow/language/generic.js"></script>
<script src="/rainbow/language/java.js"></script>
<script src="/rainbow/language/css.js"></script>
  <script type = "text/javascript">
/*
 * do some jQuery magic on load
 */
$(document).ready(function() {
    function showHiddenParagraphs() {
        $("pre.hidden").fadeIn(500);
    }
    setTimeout(showHiddenParagraphs, 1000);
});

</script>
  </ui:define>
  <ui:define name="content">
  <div style="margin:20px">
  <h1>#{tutorialController.tut.title}</h1>
  <br/>
  <h:outputText value="#{tutorialController.tut.contentStr}" escape="false"/>
  </div>
  </ui:define>
</ui:composition>

Answer 1

In JSF 2.0, all your web resources files like css, images or JavaScript, should put in “resources” folder, under the root of your web application (same folder level with “WEB-INF“).

把你的js/css放在resources/js和 resources/css文件夹并使用 <h:outputStylesheet 访问它们和 <h:outputScript

像这样

<h:outputScript name="js/rainbow.min.js" />

和

<h:outputStylesheet name="css/language/css.js" />

等等……

---

另请阅读:Resources (Library) In JSF 2.0