it-swarm.com.de

Wie man TinyMCE Responsive macht

Ich erstelle eine Responsive Site mit dem Foundation Framework und TinyMCE bricht das Format auf, wenn die Seite verkleinert wird (sie reagiert nicht). Wie mache ich TinyMCE ansprechbar?

16
Mike

Der TinyMCE-Editor kann mit CSS-Abfragen ansprechbar gemacht werden. Fügen Sie einfach CSS-Regeln hinzu, die die width-Eigenschaft von table.mceLayout und die tinyMCE-Textbereiche festlegen. Sie müssen diese CSS-Regeln mit !important durchsetzen, da sie sonst überschrieben werden.

Zum Beispiel verwende ich css ähnlich:

/* 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;
    }
}

Siehe dieses jsfiddle: http://jsfiddle.net/johannesjh/384uf/

Hinweis: Sie können verschiedene Medienabfragen oder CSS-Klassen verwenden, um das responsive Grid des "Foundation Framework" zu verwenden.

14
Johannes

Es gibt eine Möglichkeit, die Symbolleisten auf kleineren Bildschirmen aufzurufen.

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

Ich machte eine Gabel aus der Geige, die Johannes gepostet hat und die die oben genannten Regeln enthält:

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

11
user2311736

Ich verwende auf einer Website etwas, um die Größe des Editors zu ändern, und die Symbolleisten werden mit der Größe der Seite verschoben:

.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;
}

Mit der kleinen Symbolleiste werden sie bei Änderungen der Editorbreite richtig angeordnet. "Theme_advanced_resizing" sollte auf "false" gesetzt sein. Außerdem ist mehr Arbeit erforderlich, damit Vollbildmodus verwendet werden kann.

0
softcod.com

Ich verwende Version 4 von TinyMCE, es gibt ein Plugin namens Autoresize. Der Editor reagiert darauf.

0
Minh Nguyen