9

textarea私はウェブページに約7秒あります。それらはすべてTinyMCEを使用したリッチテキストエディタです。ただし、ページの読み込み時には、そのうちの1つだけが表示され、残りは非表示になります。ユーザーは、残りのテキスト領域を1つずつ表示する「表示」リンクをクリックできます。

しかし、私には奇妙な問題があります。すべてtextareaのは次のように設定されています。

<textarea cols="40" rows="20"></textarea>

ただし、textareaページの読み込み時に表示されるのは、私が望むフルサイズだけです。私がそれらを示すとき、残りtextareaのsは本当に小さいです。ですから、ページの読み込み時に非表示になっているため、おそらくレンダリングされないと思います。

どうすればこれを修正できますか？

4

8 に答える 8

7

非表示のテキストエリアに CSS を追加してみてください。

たとえば、

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>

私は、TinyMCE の CSS がデフォルトの CSS 動作の一部をオーバーライドする、これに遭遇したと思います。最終的に「再オーバーライド」する必要があり、最終的に TinyMCE の css ページを編集しました。

于 2009-03-26T11:08:10.103 に答える
6

これは MCE のバグ、または少なくとも MCE にない機能だと思います。

HTMLではなくCSSで入力ボックスのスタイルを設定したかったので（yuck）試しました

visibility: hidden;

それ以外の

display: none;

そして、すべてが再び機能しました。

後者の場合、要素がスペースを占有せず、要素の幅と高さを検出する MCE コードがトリップすると思います。

于 2009-08-14T11:31:20.763 に答える
2

TinyMCE を jQuery でロードする場合、この問題は次のように解決できます。

1- テキストエリアで、インライン スタイル属性に高さを指定します。

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>

2- TinyMCE エディターをインスタンス化するときにコールバック関数を追加します。例: tinymceLoaded

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'PATH_TO_TINYMCE.js',

    // General options ...
    // Theme options...

    // callback function
    init_instance_callback : "tinymceLoaded"
});

3- tinymceLoaded 関数でエディターの高さを設定します。

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}
于 2010-09-16T21:42:36.883 に答える
1

TinyMCE 内の隠し divから、div を visible にすると有効として表示されないため、ユーザーのslolifeの回答が役に立ちました:

含まれている div を再表示した後、tinyMCE.init(...) を呼び出してみてください。

于 2012-03-12T16:45:23.150 に答える
1

実際のセットアップと、さまざまな表示/非表示機能をどのように実行しているかについて、さらに詳細がなければ、決定的な答えを出すのは困難です. ただし、いくつかの一般的な考えを捨てることができます。

  • ページの読み込み時に非表示にしない場合、適切にレンダリングされますか? これにより、バグがどの時点で発生したかについて決定的な答えが得られます。
  • テキストエリアのビューを切り替えるときに、行/列の属性を同時に明示的に設定できますか?
  • css (おそらく !important を使用) を使用して、効果があるかどうかをテストするよりも、テキストエリアの幅と高さを設定できますか?
于 2009-03-26T11:11:15.930 に答える
1

TinyMCE エディターに変換された非表示のテキストエリア コントロールの高さが小さすぎるという同じ問題が発生しています。設定は機能visibilityしnoneましたが、その場所に大きな空きスペースが残ります。

次の解決策は私にとってうまくいきました：

  • ページの読み込み時に最初にテキストエリア コントロールを非表示にしないでください
  • 代わりに、TinyMCE のすべての init 構成を次のように設定します。
tinyMCE.init({
        ...
        init_instance_callback : "onInstanceInit"
});
  • onInstanceInit関数で、初期化された TinyMCE エディターを動的に非表示にします
  • 後でこのエディターを表示すると、非表示にならなかったのと同じように、高さが再び正常になります。
于 2012-07-15T11:11:17.583 に答える
0

隠されているもう 1 つの理由は、初期化された tinymce を使用して dom から要素を削除する場合です。最初にこの要素から tinymce を削除する必要があるため、新しい tinymce 要素を初期化するときの奇妙な動作を回避できます。

たとえば、次のようになります。

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

それでおしまい。

于 2014-11-20T11:39:06.277 に答える