如何让 PrimeFaces 编辑器扩展到可用空间？答案

【问题标题】：How to get PrimeFaces editor to expand to available space?如何让 PrimeFaces 编辑器扩展到可用空间？
【发布时间】：2012-10-23 19:33:57
【问题描述】：

我已经开始使用 PrimeFaces p:editor 进行文本输入，而且大部分情况下我对它的工作方式非常满意。但是文档指出，它所基于的 CKEditor 并未插入 ThemeRoller 框架，因此组件尺寸不会自动调整。

例如：

<h:panelGrid columns="2">

    (stuff)

    <h:outputLabel value="Content:" />
    <p:editor id="editDoc" widgetVar="editorDoc"
                 value="#{editDocument.text}"
                 style="width: 700px"
                                  />

    (more stuff)
</h:panelGrid>

我希望 p:editor 扩展到 h:panelGrid 呈现的表格的宽度。然而，我没有尝试过任何工作。有什么建议吗？

更新：

我应该注意到 p:editor 标签不注意 style 属性。相反，它有一个 width 属性和一个 height 属性，它们的工作方式与 CSS 参数的工作方式不同。例如 width="100%" 是一个错误。

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

p:editor 的实际宽度取决于其内部<div> 的大小。您可以简单地覆盖该默认值：

<style type="text/css">
    #editDoc > div {
        width: 99.5% !important;
    }
</style>

同时删除p:editor 的style="width: 700px" 并将其附加到h:panelGrid。

适用于所有p:editor 组件的更通用的解决方案是覆盖.ui-editor 类的默认width 属性：

<style type="text/css">
    .ui-editor {
        width: 99.5% !important;
    }
</style>

【讨论】：

感谢您指出@AlanObject，我编辑了我的答案。
我赞成，但经过更长时间的测试，您提供的解决方案只会调整工具栏的大小。内部 iframe（用户在其中键入）始终具有大约 600 像素的宽度。有解决办法吗？
@geceo 请注意，此解决方案可能已过时。我不知道当前 PrimeFaces 版本的表现如何。

【解决方案2】：

对于Primefaces 4，我们要设置内部iframe的宽度：

<style type="text/css">
    .ui-editor iframe {
        width:100% !important;
    }
</style>

【讨论】：