Comment rendre TinyMCE réactif

Je fais un site Responsive à l'aide de la fondation du cadre et de la TinyMCE rompt le format de la page est mise à l'échelle vers le bas(il n'est pas sensible). Comment puis-je faire TinyMCE sensible?

source d'informationauteur Mike

  1. 15

    L'éditeur TinyMCE peut être adaptée en utilisant les css media queries. Ajoutez simplement des règles css qui définissez la propriété width de table.mceLayout et la tinyMCE textareas. Vous aurez besoin d'appliquer ces règles css à l'aide !important car autrement, ils seraient écrasés.

    E. g., J'utilise le css similaire à ceci:

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

    Voir ce jsfiddle: http://jsfiddle.net/johannesjh/384uf/

    Remarque: Vous pouvez utiliser différents médias, des requêtes ou des classes css pour faire usage de la "fondation du cadre"de la grille souple.

  2. 9

    Il y a un moyen d'obtenir les barres d'outils pour s'envelopper sur les petits écrans.

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

    J'ai fait un fork de jouer du violon que Johannes posté qui comprend les règles ci-dessus:

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

  3. 0

    J'utilise la version 4 de TinyMCE, il y a un plugin nommé autoresize. Il fait de l'éditeur réactif.

  4. 0

    Ici est quelque chose que j'utilise sur un site pour faire à l'éditeur de les redimensionner et de les barres d'outils se déplace avec la taille de la page :

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

    À l'aide de petits outils, ils sont correctement placées de manière que l'éditeur de la largeur des changements.
    "theme_advanced_resizing" doit être réglé sur "false". Aussi, plus de travail est nécessaire pour le faire fonctionner avec le plein écran.