使 p:editor 在 p:dialog 中适合对话框大小答案

【问题标题】：Making p:editor in a p:dialog fit the dialogs size使 p:editor 在 p:dialog 中适合对话框大小
【发布时间】：2021-12-08 00:33:40
【问题描述】：

我在 p:dialog 中有一个 p:editor。该对话框是可拖动的，我希望编辑器填充对话框的所有可用空间。我不知道这是否纯粹是一个 HTML/CSS 问题，或者这是否与我正在使用的 JSF 组件有关。关于宽度，当我在我的子容器中设置 width: 100% 时，这很好用。当我尝试使用 height: 100% 时，它没有任何效果。这是我的代码：

<h:form id="frmNote">
            <p:dialog id="dlgNote" widgetVar="dlgNote"
                      header="Note"
                      position="right"
                      style="height: 500px; width: 500px;"
                      dynamic="false" modal="false"
                      fitViewport="false" resizable="true"
                      closable="true" closeOnEscape="true"
                      onHide="$('#frmNote\\:quit').click();">
                        <p:hotkey bind="esc" handler="PF('dlgNote').hide();" />
                        <p:editor id="noteEditor" widgetVar="noteEditor"
                                      value="#{backenbean.text}"
                                      style="vertical-align: top; width: 100%; height: 100%"
                                      controls="bold italic underline strikethrough font size color highlight bullets numbering undo redo">
                        </p:editor>
            </p:dialog>
        </h:form>

【问题讨论】：

标签： html css jsf primefaces

【解决方案1】：

基本上，问题在于 primefaces 库中的资源依赖“editor.js”的默认高度为 250px：

@ResourceDependencies({
    @ResourceDependency(library = "primefaces", name = "editor/editor.css"),
    @ResourceDependency(library = "primefaces", name = "jquery/jquery.js"),
    @ResourceDependency(library = "primefaces", name = "jquery/jquery-plugins.js"),
    @ResourceDependency(library = "primefaces", name = "core.js"),
    @ResourceDependency(library = "primefaces", name = "components.js"),
    @ResourceDependency(library = "primefaces", name = "editor/editor.js")
})


public class Editor extends EditorBase {

public static final String COMPONENT_TYPE = "org.primefaces.component.Editor";
}

editor.js =>

(function(F){F.cleditor={defaultOptions:{width:"auto",height:250, ...

为了使用父对话框的高度，我在 Editor primefaces 组件中包含了 style:"height:inherit"，如下所示：

   <p:editor id="noteEditor" widgetVar="noteEditor" style="height: inherit"
                     value="#{exampleBean.text}"
                     controls="bold italic underline strikethrough font size color highlight bullets numbering undo redo">
        </p:editor>

并包含一个 Javascript 函数，用于在显示对话框时将高度从 250px 修改为继承于 primefaces 生成的 div（基于您的代码）：

  <p:dialog id="dlgNote" widgetVar="dlgNote"
              header="Note"
              position="right"
              minWidth="500" onShow="document.getElementById('noteEditor').getElementsByClassName('ui-editor ui-widget-content')[0].setAttribute('style', 'width: auto; height: inherit');"
              minHeight="500"
              dynamic="false" modal="false"
              fitViewport="false" resizable="true"
              closable="true" closeOnEscape="true"
              onHide="$('#frmNote\\:quit').click();">
        <p:hotkey bind="esc" handler="PF('dlgNote').hide();" />

        <p:editor id="noteEditor" widgetVar="noteEditor" style="height: inherit"
                     value="#{exampleBean.text}"
                     controls="bold italic underline strikethrough font size color highlight bullets numbering undo redo">
        </p:editor>
    </p:dialog>

结果：

【讨论】：