web-dev-qa-db-ja.com

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

私はファウンデーションフレームワークを使用してレスポンシブサイトを作成しており、ページが縮小されるとTinyMCEがフォーマットを壊します（レスポンシブではありません）。 TinyMCEを応答可能にするにはどうすればよいですか？

tinymceresponsive-design
18
Mike

TinyMCEエディターは、cssメディアクエリを使用して応答性を高めることができます。 table.mceLayoutの幅プロパティとtinyMCEテキスト領域を設定するCSSルールを追加するだけです。これらのCSSルールは!importantを使用して適用する必要があります。そうしないと上書きされるためです。

たとえば、私はこれに似たcssを使用します：

/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
}

このjsfiddleを参照してください： http://jsfiddle.net/johannesjh/384uf/

注：異なるメディアクエリまたはcssクラスを使用して、「基礎フレームワーク」のレスポンシブグリッドを利用することもできます。

15
Johannes

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

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

私はヨハネスが投稿したフィドルのフォークを作りました。これには上記のルールが含まれています。

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

12
user2311736

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

.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」に設定する必要があります。また、フルスクリーンで動作させるにはさらに作業が必要です。

0
softcod.com

TinyMCEのバージョン4を使用しています。autoresizeというプラグインがあります。エディターが応答しやすくなります。

0
Minh Nguyen

TinyMCEの最新バージョンでツールバーを応答可能にする：

.tox-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}
.tox-toolbar__group {
    flex-wrap: nowrap !important;
}

これにより、モバイルデバイスのツールバーに水平スクロールバーが追加されます。

0
stardust4891