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 标记不关注样式属性。相反，它具有宽度属性和高度属性，并且它们的工作方式与CSS参数的工作方式不同。例如 width =“100％”是错误。

Answer 1

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

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

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

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

.ui-editor

Answer 2

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

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

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

2 个答案: