6

この質問は基本的に逆です。エディターの幅が小さすぎる場合、TinyMCEの次の行にツールバーボタンを折り返す方法はありますか？

私はTinyMCEエディターを持っており、theme_advanced_buttons1、theme_advanced_buttons2、theme_advanced_buttons3を介してボタンを指定しています。各ツールバー行は、レイアウトが水平方向にオーバーフローしないように、かなり短く設計されています。

ツールバーがすべて収まる場合、ツールバーを1行に再配置する方法はありますか？（たとえば、訪問者はワイドスクリーンディスプレイを備えており、ブラウザウィンドウは最大化されています。）

display:blockCSSを介して、設定やfloat:leftツールバーの行（tr要素）を介して可能になると思います。おそらく、clear: leftエディタ領域へのオーバーフローを防ぐために、次の要素をいくつか追加します。ただし、これは醜いハックのようです。もっと良いものを思いつくことができるといいのですが。

4

4 に答える 4

6

ボタンの各行はテーブルにラップされているため、theme_advanced_buttons1テーブルの内側、theme_advanced_buttons2別のテーブルの内側、別のテーブルの内側にあるため、ボタンtheme_advanced_buttons3をインラインにするために使用できます。

.wp_themeSkin table.mceToolbar {
  margin: 0 6px 2px; // this is by default
  display: inline-table; // this is extra I've added to keep them in single line
}

以下はdisplay: inline-table;、エディターのフルスクリーンモードのスクリーンショットです。ボタンの3行すべてが1行に並んでいます。

ここに画像の説明を入力してください

于 2012-07-09T12:35:40.247 に答える
3

有効なボタンの数によっては、table.mceToolbarをインラインテーブルを表示するように設定すると、エディターの幅が広くなりすぎる可能性があります。

代わりに、各テーブルを左にフロートさせて、最大許容幅に達したときに破損するようにします。

 table.mceToolbar {margin-left:3px; float:left}
于 2013-11-29T15:45:42.750 に答える
1

これは、異なる行に独自のテーブル要素があるため、cssを使用した場合にのみ機能しません。あなたができることは、tinymceの初期化の前にユーザー画面の幅をチェックすることです。この値に応じてtheme_advanced_buttons1、theme_advanced_buttons2などを設定できます。

例：

var width = screen.width;

tinyMCE.init({
mode: 'exact',
    ....

    theme_advanced_buttons1 : width < 1024 ? "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter" : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : width < 1024 ? "justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect" : "",
    ...
});
于 2012-07-09T12:38:01.100 に答える
0

javascriptコードに次のJquery行を追加します。

$('[id^=tinyelement_toolbar]').css('display','inline-table')
于 2013-04-27T21:20:22.337 に答える