1

子 wysiwyg エディターを持つ「display: none」div があります。jHtmlAreaとCKEditorの両方でこの問題が発生したため、これは iframe の問題であると考えています。この例では、jHtmlArea を使用しています。「display: none;」がなければ、すべて正常に動作します。ただし、非表示の場合、子エディターで div を「表示」すると、完全に読み込まれません。しばらく前にこの問題を調査しましたが、解決策が見つかりませんでした。非表示の iframe になんらかのリロードの問題があると書かれているのを見つけたのを覚えていると思いますが、投稿が見つかりません。誰にも提案はありますか？お時間と専門知識をお寄せいただきありがとうございます。

<script type="text/javascript">
    $(document).ready(function () {
        $("textarea").htmlarea();
    });
</script>

<div id="container" style="display: none;">
    <textarea></textarea>
</div>

<a href="javascript:void(0);" onclick="$('#container').show()">Show me!</a>

私はすでにこの解決策を試しましたが、役に立ちませんでした。

4

3 に答える 3

1

@Humberto と @Siwei-Kang の提案に感謝します。彼らの仕事は、私がこの解決策を思いつくのに役立ちました。

ページの読み込み時ではなく、ボタンのクリック時に htmlarea をインスタンス化します。いくつかの追加機能も追加しました：

  • show() コールバック関数で htmlarea をインスタンス化する
  • textarea は "visibility: hidden" として始まり、show() で不動産を予約しますが、htmlarea が表示されたときのちらつきを減らします。
  • 「html」ボタンが引き続き機能するように、htmlarea のインスタンス化後に textarea を可視に戻します。

このjsFiddleを参照してください

<script type="text/javascript">
    function toggle() {
        $('#container').toggle('blind', function() {
            $('#container textarea').htmlarea().css("visibility", "visible");
        });
    }
</script>

<div id="container" style="display: none;">
    <textarea style="visibility: hidden; width: 300px;"></textarea>
</div>

<a href="javascript:void(0);" onclick="toggle();">Toggle me!</a>
于 2012-08-22T12:52:04.787 に答える
1

1 つの回避策は、ディスプレイをブロックするように設定し、javascript を介してそれを hide() することです。そのため、iframe はロード時に利用可能な全幅を占有します。このjsFiddleを参照してください

于 2012-08-21T19:42:34.627 に答える
1

余裕がある場合は、visibility:hiddenの代わりにスタイルを使用してくださいdisplay:none。欠点は、が設定されるまでコンテンツが表示されなくても、非表示の要素がドキュメント領域を完全に占有することvisibility:visibleです。

@Siweiの回答に基づいて、この jsFiddleを試してください。

編集: jsFiddle を更新して、ユーザーがShow me をクリックするまでエディター コンテナーの垂直ピクセルを 0 にしました。

于 2012-08-21T19:57:44.273 に答える