Question

在我的项目中，我从用户那里获取原始文本并将其发送到服务器以执行以下操作

决定每个单词的类型
使用相关的CSS类

span

保留原始文本结构（即 \r\n表示段落结尾，以便我可以将其包装在p）
将结果显示给用户

使用

<h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />

简而言之，我正在服务器端执行所有html标记。 return ed结果是这样的（当然是一个长字符串，结果为了可读性而缩进）：

<span> <!-- from h:outputText -->
  <p> <!-- the returned String coming from the Bean starts here -->
    <span class="interjection">Hello</span>
    <span class="noun">World</span>
    !
  </p>
  <p>
    <span class="noun">Life</span>
    <span class="verb">is</span>
    <span class="adjective">beautiful</span>
    .
  </p> <!-- the returned String coming from the Bean ends here -->
</span> <!-- from h:outputText -->

但是h:outputText会在文本周围生成span元素。到目前为止，尽管我没有看到任何问题。但是，我觉得这是不对的，因为我在html中读到将p置于span内是违法的。

有没有办法强制h:outputText围绕来自Bean的文本生成div，还是有合法/更好的方法来实现这一目标？

以下是Chrome的DevTool元素标签中的剪辑：

Answer 1

此，

<h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />

不会生成任何其他HTML。所以你实际上并没有那个标签。

根据您的HTML DOM检查器屏幕截图，您似乎实际上有这个：

<h:outputText id="wordTypeEditor" value="#{wordTypeBean.wordTypeValues}" escape="false" />

实际上，这会生成一个<span>元素，因为您已明确指定了一个必须在客户端结束的属性id属性。

删除该id属性，将其移至<h:panelGroup layout="block">包裹<h:outputText>。

<h:panelGroup id="wordTypeEditor" layout="block">
    <h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />
</h:panelGroup>

如果您不需要在ajax中的其他位置引用它，只需<div id="wordTypeEditor">即可。

<div id="wordTypeEditor">
    <h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />
</div>

另见：

What jsf component can render a div tag?

将p放在span中或强制h：outputText以生成文本div

1 个答案:

另见：