Question

使用escape =“false”从h：outText呈现的内容未绑定到适用于该页面的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

在JSF 2.0中，您的所有Web资源文件，如CSS，图像或 JavaScript，应该放在“资源”文件夹下，根据你的 Web应用程序（与“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

Answer 2

潜在的问题可能出在这里的地方数量，请按顺序验证以下内容。

    1) Check your CSS files are getting loaded by the browser 
by monitoring the request in developer tools on Firefox or chrome.

   https://developers.google.com/chrome-developer-tools/docs/overview?hl=fr

    2) check the source of your html to see if that looks 
fine and tags are not encoded etc. 

    3) verify your CSS to see it works and it doesn't have missing semicolon,
 brackets,quotes etc by adding it to a test html page on your machine.

Answer 3

我解决了。实际的问题是存储在数据库中的html是通过p：编辑器生成的，它在每一行都放了很多div标签，所以当它通过h：outputText标签呈现时，css或javascript无法解析代码块由于包围的div和其他标记，它们适用于语法高亮。所以在将数据存储到数据库之前，我已经删除了所有这些不必要的标记。谢谢大家回复。

CSS和Javascript不适用于从h：outputText呈现的内容，其中escape =“false”

3 个答案: