jsf-2 - 如何让 PrimeFaces 编辑器扩展到可用空间？

Question

我已经开始使用 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%" 是一个错误。

Answer 1

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

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

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

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

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