如何讓PrimeFaces編輯器擴展到可用空間？

我已經開始使用PrimeFaces p：編輯器進行文本輸入，而且大部分時間我對它的工作原理都很滿意。但是文檔注意到它所基於的CKEditor並沒有插入到ThemeRoller框架中，所以組件的尺寸不會自動調整。如何讓PrimeFaces編輯器擴展到可用空間？

因此，例如：

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

我想號碼：編輯拓展到表的寬度h：panelGrid的呈現。然而，我沒有嘗試過的作品。有什麼建議麼？

UPDATE：

我要指出的是，號碼：編輯標籤不關注的風格屬性。相反，它具有寬度屬性和高度屬性，它們的工作方式與CSS參數的工作方式不同。例如，width =「100％」是錯誤。

來源

2012-10-23 AlanObject

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>

來源

2012-10-24 06:56:07

感謝您指出@AlanObject，我編輯了我的答案。 –

我upvoted，但經過較長時間的測試後，您提供的解決方案僅調整工具欄的大小。內部iframe（用戶鍵入的內容）的寬度始終爲600px左右。有解決方案嗎？ –

@geceo請注意，此解決方案可能已過時。我不知道這是如何與當前的PrimeFaces版本的行爲。 –

對於Primefaces 4中，我們必須設置內iframe的寬度：

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

來源

2014-03-20 08:18:56

如何讓PrimeFaces編輯器擴展到可用空間？

回答

相關問題