如何使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>

還要刪除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>