web-dev-qa-db-fra.com

TinyMCE largeur et hauteur désobéissants!

Selon la documentation (conflictuelle) de TinyMCE, l'éditeur prend la taille de l'élément textarea (ou autre) qu'il remplace. Il indique également que vous pouvez définir la taille de l'éditeur en spécifiant { height: '123', width: '123' } dans la méthode init.

J'ai essayé les deux et je n'obtiens toujours qu'un seul résultat: l'éditeur se redimensionne lui-même (ce dont il se souvient, cela me dépasse) ce que c'était la dernière fois qu'un utilisateur l'a redimensionné.

javascriptjquerytinymce
24
Jimbo

Sa enregistre la dernière taille en raison des paramètres de thème. Vous pouvez le désactiver en utilisant le code suivant

$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,
27
Stuart

Voici ma solution. 
Il fonctionne également pour plusieurs instances des éditeurs TinyMCE (init () avec la propriété 'height' ne fonctionne que pour la première instance, c'est donc une solution de contournement pour obtenir une hauteur fixe ou minimale de la zone d'édition).

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}
3
Kamil Bednarz

Oui, c'est très énervant. J'ai écrit ma propre fonction pour ajuster la hauteur à l'entrée donnée. Vous pouvez le modifier pour définir votre hauteur/largeur à votre guise:

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },
1
Thariama
tinyMCE.init({
        mode : "exact",
         .....

mode: "exact" désactivera la possibilité de redimensionner la grille par glisser

1
Gihan Lasita

J'ai trouvé la zone de texte TinyMCE (appelée ".mceContentBody" dans mon thème) trop petite et mal encadrée dans la nouvelle zone de contenu. Dans mon thème, il y a un fichier CSS appelé style éditeur. J'ai changé la largeur (à 98%), mais depuis que TinyMCE a utilisé des cookies pour se souvenir de la taille de l'éditeur, les modifications CSS ne se sont pas déroulées. Après EFFACER LE CACHE DE MON NAVIGATEUR , les modifications de largeur/marge CSS ont pris effet. Finalement. Gah.

0
Commandrea

Ajoutez un 'body_id' en utilisant tinymce.init, puis utilisez cet identifiant dans 'content_css' pour donner à l'éditeur le comportement CSS souhaité. Ainsi:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

Et ensuite dans app.css:

#new-journal-editor {
    height: 123px;
    width: 123px;
}
0
gpkamp

Bien qu'il y ait beaucoup de bonnes suggestions ici, j'ai trouvé la réponse en lisant la question. Il n'y a PAS de problème de hauteur ni de largeur, alors pourquoi toutes ces solutions de contournement avec CSS ou l'écriture de fonctions, la méthode de la documentation fonctionne.

Le défi initial concernait le redimensionnement. L’auteur n’a jamais dit que la hauteur ou la largeur ne fonctionnait pas, il ne fonctionnait tout simplement pas comme il l’espérait - c’est ce qui a été mentionné ci-dessous: 

"L'éditeur se redimensionne (ce dont il se souvient, cela me dépasse) à ce que c'était la dernière fois qu'un utilisateur l'a redimensionné."

Saidul Islam a répondu correctement à la question et, pour aller un peu plus loin, Stuart a expliqué comment désactiver les cookies. Si vous devez définir la hauteur et la largeur, faites-le lorsque vous êtes dans init () et faites-le. Vous pouvez lire plus ici:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

Le dimensionnement de la zone de saisie en hauteur et en largeur s'effectue comme indiqué ci-dessous.

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
0
user1946891

J'ai remarqué qu'une table contenante imposait des largeurs et que le jeu d'icônes correspondait à des td. Il y a donc une largeur minimale à laquelle elles doivent être réduites. Si vous avez plusieurs icônes sur une seule ligne, vous risquez de perdre la largeur.

En quelque sorte SO question liée, a fini par être tout à fait liée à votre problème: Capable de faire flotter des éléments td de manière cohérente?

0
danjah

je fixe la largeur et la hauteur à la zone d'édition

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>
0
Gihan Lasita

Je suis confronté au même problème mais je finis par le faire

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}
0
Abdalla Arbab