tinymce - TinyMCE をレスポンシブにする方法

Question

Foundation フレームワークを使用してレスポンシブ サイトを作成していますが、TinyMCE はページが縮小されるとフォーマットを壊します (レスポンシブではありません)。TinyMCE をレスポンシブにするにはどうすればよいですか?

Answer 1

小さな画面でツールバーを折り返す方法があります。

/* make the toolbar wrap */
.mceToolbar td {
    display:table-row;
    float: left;
}
.mceToolbar td:nth-of-type(11){
    clear: left;
}

上記のルールを含む Johannes が投稿したフィドルのフォークを作成しました。

http://jsfiddle.net/joshfeck/gMVSE/

Answer 2

TinyMCE 5.1 は、新しいモバイル レスポンシブ デザインでリリースされました。

意図したとおりに機能するようにするには、TinyMCE を使用しているページの先頭に次のコードを追加する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1">

詳細はこちら: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it

Answer 3

これは、エディターのサイズを変更し、ページのサイズに合わせてツールバーを移動するためにサイトで使用するものです。

.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}

.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
} 

table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}

小さなツールバーを使用すると、エディターの幅が変化しても適切にレイアウトされます。「theme_advanced_resizing」は「false」に設定する必要があります。また、フルスクリーンで動作させるには、さらに作業が必要です。

Answer 4

TinyMCE のバージョン 4 を使用しています。autoresize という名前のプラグインがあります。これにより、エディターがレスポンシブになります。