如何使PrimeFaces编辑器扩展到可用空间

Question

我已经开始使用PrimeFaces p：编辑器用于文本输入，并且在大多数情况下，我对其工作方式感到非常满意。但是，该文档指出，其基于的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 标签不关注样式属性。取而代之的是，它具有 width 属性和高度属性，并且它们的工作方式与CSS参数的工作方式相同。例如 width =" 100％" 是一个错误。

Answer 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>

Answer 2

对于PrimeFaces 4，我们必须设置内部iframe的宽度：

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