web-dev-qa-db-fra.com

Comment rendre TinyMCE Responsive

Je crée un site Responsive en utilisant le framework de base et TinyMCE rompt le format lorsque la page est réduite (ce n'est pas réactif). Comment rendre TinyMCE responsive?

tinymceresponsive-design
16
Mike

L’éditeur TinyMCE peut être réactif à l’aide de requêtes de support css. Ajoutez simplement des règles css qui définissent la propriété width de table.mceLayout et les textareas tinyMCE. Vous devrez appliquer ces règles CSS à l'aide de !important, sinon elles seraient écrasées.

Par exemple, j'utilise css semblable à 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 souhaiterez peut-être utiliser différentes requêtes multimédia ou classes css pour les utiliser dans la grille sensible du "framework de base".

14
Johannes

Il existe un moyen de faire en sorte que les barres d’outils apparaissent sur des écrans plus petits.

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

J'ai fabriqué une fourchette du violon que Johannes a posté qui inclut les règles ci-dessus:

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

11
user2311736

Voici quelque chose que j'utilise sur un site pour que l'éditeur redimensionne et que les barres d'outils se déplacent 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;
}

A l’aide d’une petite barre d’outils, elles sont correctement présentées lorsque la largeur de l’éditeur change. "Theme_advanced_resizing" doit être défini sur "false". En outre, davantage de travail est nécessaire pour le faire fonctionner en plein écran.

0
softcod.com

J'utilise la version 4 de TinyMCE, il existe un plugin nommé autoresize. Cela rend l'éditeur réactif.

0
Minh Nguyen