当编辑器最初隐藏时，CKEditor 自动增长将高度设置为 0

Question

我们正在将 XPage 应用程序升级到版本 12.0.2。平台附带的 CKEditor 版本已更改为 4.18（从 4.5.6.1）。

现在，当 CKEditor 最初隐藏时，例如在隐藏的 Bootstrap 选项卡中，高度设置为 0。

我们可以将 autoGrow_onStartup 设置为 false，但在它在可重用组件中正常工作的情况下，它也会停止自动增长。 autoGrow_minHeight 未设置，因此应使用默认值。

我检查了CKEditor和autogrow代码，似乎它没有检测内容的高度，因此将变量设置为“auto”，将其转换为NaN数值。随后，代码调用 resize(..,NaN,..)。以前的版本忽略了 NaN，但现在它转换为 0 - 可能是通过

height = convertCssUnitToPx( height );

目前，我看到的唯一解决方案是创建一个自己的自动增长版本来处理 NaN 高度并将其转换为默认高度。

有人有更好的主意吗？谢谢。

Answer 1

当编辑器变得可见时，您可以使用 Intersection Observer

触发自动增长

1. 将 onClientLoad 事件处理程序添加到最近的容器元素，在我的例子中，它位于自定义控件中：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:inputRichText id="${compositeData.field.fieldName}" readonly="${compositeData.field.readOnly || ((compositeData.field.fieldName == 'Body') and formContext.isBodyLocked)}"  
        htmlConversionWarning="noWarning" styleClass="times-12">
        <xp:this.value><![CDATA[${javascript:"#{"+formContext.dataSourceName+"."+compositeData.field.fieldName+"}"}]]></xp:this.value>
        
        <xp:this.dojoAttributes>
            <xp:dojoAttribute name="fontSize_sizes" 
                value="8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt" />
            <xp:dojoAttribute name="toolbar" value="${compositeData.field.toolbar}" /> <!-- Slim, Medium (default), Large, Full -->
            <xp:dojoAttribute name="skin" value="moono-lisa,moono-lisa" />
            <xp:dojoAttribute name="tabSpaces" value="4" />
            <xp:dojoAttribute name="contentsCss" value="CKStyles.css" />
            <xp:dojoAttribute name="removePlugins" value="ibmsametimeemoticons" />
            
            <!-- Set height, if provided -->
            <xp:dojoAttribute name="height" value="${javascript:'' + compositeData.field.size}" loaded="${compositeData.field.size > 0}" />
            <xp:dojoAttribute name="autoGrow_minHeight" value="${javascript:'' + compositeData.field.size}" loaded="${compositeData.field.size > 0}" />
        </xp:this.dojoAttributes>
        
    </xp:inputRichText>
    
    <!-- When initially hidden editor becomes visible, trigger autogrow -->
    <xp:eventHandler event="onClientLoad" submit="false" script="attachVisibilityObserver(thisEvent.target)" />

</xp:view>

2. 在一些链接的 javascript 文件中定义函数：

/* Attach an intersection observer to trigger autogrow on CKEditor instances that were initially hidden and became zero height */
function attachVisibilityObserver(element) {
    new IntersectionObserver(function (entries, observer) {
        entries.forEach(function(entry) {
            if(entry.intersectionRatio > 0) {
                var textArea = element.querySelector("textarea");
                if (textArea) {
                    var editor = CKEDITOR.instances[textArea.id];
                    // Trying to exec autogrow throws errors if editor is not ready yet. This happens on page load 
                    // when editor is already visible, but those are  initialized properly anyway
                    if (editor && editor.status === "ready") {
                        editor.execCommand('autogrow');
                    }
                    observer.disconnect();
                }
            }
        });
    }).observe(element);
}

当编辑器变得可见时，这将（重新）触发 CKEditor 的自动增长插件。我在选项卡中使用它，但应该同样适用于手风琴、可折叠部分等