IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Les images sont pas responsives [TinyMCE]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut Les images sont pas responsives
    Bonsoir,

    j'ai une interface de ma zone admin qui utilise l'éditeur tinyMCE :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
        <form id="div_tinymce" method="post" name="edit" action="/admin-actu-save">
       ...
            <textarea name="actu" id="file-picker"><?= $this['actu_text'] ?></textarea>
          ...
            <input type="submit" value="envoyer"/>
        </form>
    </div>


    et

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
      tinymce.init({
                selector: 'textarea#file-picker',
                ui_mode: 'split',
                /*mobile: {
                    menubar: true
                }
                mobile: {
                    theme: 'mobile'
                }*/
                /*width:1200,
                height:300,*/
                resize: 'both',
                statusbar: false,
                language_url: "assets/js/tymce_fr_fr.js",   // ici le chemin d'accès au fichier de traduction
                language : "fr_FR",
                plugins: 'image code',
                toolbar: 'undo redo | styles | bold italic | link image ',
     
                /* enable title field in the Image dialog*/
                image_title: true,
                /* enable automatic uploads of images represented by blob or data URIs*/
                automatic_uploads: true,
                /*
                URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
                images_upload_url: 'postAcceptor.php',
                here we add custom filepicker only to Image dialog
                */
                images_upload_url: "<?= URL_LOCALHOST.'/admin-upload' ?>",
     
                file_picker_types: 'image',
                /* and here's our custom image picker*/
                file_picker_callback: function (cb, value, meta) {
                    let input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
     
                    /*
                    Note: In modern browsers input[type="file"] is functional without
                    even adding it to the DOM, but that might not be the case in some older
                    or quirky browsers like IE, so you might want to add it to the DOM
                    just in case, and visually hide it. And do not forget do remove it
                    once you do not need it anymore.
                    */
     
                    input.onchange = function () {
                        let file = this.files[0];
     
                        let reader = new FileReader();
                        reader.onload = function () {
                            /*j
                            Note: Now we need to register the blob in TinyMCEs image blob
                            registry. In the next release this part hopefully won't be
                            necessary, as we are looking to handle it internally.*/
     
                            //var id = 'blobid' + (new Date()).getTime();
                            let id = file.name.split(".")[0]; // alert('head 50 filename='+file.name);      // mettre ici le nom du fichier
                            let blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                            let base64 = reader.result.split(',')[1];
                            let blobInfo = blobCache.create(id, file, base64);
                            //var blobInfo = blobCache.create(id);
                            blobCache.add(blobInfo);
     
                            /* call the callback and populate the Title field with the file name */
                            cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };
     
                    input.click();
                },
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            });


    Malgré des recherches, je ne réussis pas le rendre entièrement responsive. Peut-on m'aider ? (J'ai commenté des essais trouvés sur le net dont le seul effet est de supprimer l'éditeur)
    Pour être plus précis, le menu et le texte, c'est responsive, mais pas les images...J'ai créé le contenu sur PC et je le regarde sur téléphone...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    A mon avis, ça doit se régler avec du CSS. Pour avancer, j'ai pensé à regarder le code généré. Voici un exemple (avec CTRL+U) :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form id="div_tinymce" method="post" name="edit" action="/admin-actu-save">
         <input type="hidden" name="id" value="327">
         <input type="date" name="date" value="2023-11-08">
              <textarea name="actu" id="file-picker">&lt;p&gt;actu du 08/11&lt;/p&gt;
    &lt;p&gt;nid de FA Saint Marcellin :&lt;/p&gt;
    &lt;p&gt;&lt;img title=&quot;nidfrelonsstmarcellin.jpeg&quot; src=&quot;http://dev.arnaudpoo.fr\/assets/upload/nidfrelonsstmarcellin.jpg&quot; alt=&quot;&quot; width=&quot;459&quot; height=&quot;612&quot;&gt;&lt;/p&gt;
    &lt;p&gt;nid de gu&amp;ecirc;pes de Corren&amp;ccedil;on :&lt;/p&gt;
    &lt;p&gt;&lt;img title=&quot;nid-guepes-correncon.jpeg&quot; src=&quot;http://dev.arnaudpoo.fr\/assets/upload/nid-guepes-correncon.jpg&quot; alt=&quot;&quot; width=&quot;635&quot; height=&quot;744&quot;&gt;&lt;/p&gt;</textarea>
             <input type="submit" value="envoyer"/>
     </form>
    Comme la ou les image(s) se trouveront toujours dans le textarea d'id file-picker, j'ai essayé ce CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    img#file-picker {
      width:50%;
    }
    Il ne donne rien. Par contre, si dans l'inspecteur, je modifie le html de l'image :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img title="nidfrelonsstmarcellin.jpeg" style="width:50%" src="http://dev.arnaudpoo.fr\/assets/upload/nidfrelonsstmarcellin.jpg" alt="" width="459" height="612" data-mce-src="http://dev.arnaudpoo.fr\/assets/upload/nidfrelonsstmarcellin.jpg">
    J'ai rajouté style="width:50%", ça devient responsive (l'image s'adapte à la taille de la page)
    Ca vous donne une idée ?
    J'ai remarqué que le code généré obtenu par CTRL+U est différent de celui donné par l'inspecteur. Dans le code de ce dernier, on voit une <iframe> et pas avec CTRL+U...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  3. #3
    Membre habitué Avatar de Chou-ette
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2018
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juin 2018
    Messages : 56
    Points : 131
    Points
    131
    Par défaut
    Je ne saurais t'aider mais seul le code donné par l'inspecteur fait foi, le code source du ctrl + U est le code html brut renvoyé par le serveur, avant toute modification que le JS pourrait faire.

  4. #4
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Merci pour l'info. Donc je ne me fis qu'au code de l'inspecteur. Si je regarde la portion qui contient l'image :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <body id="tinymce" class="mce-content-body " data-id="file-picker" aria-label="Zone de Texte Riche. Appuyez sur ALT-0 pour l'aide." contenteditable="true" spellcheck="false"><p>actu du 08/11</p><p>nid de FA Saint Marcellin :</p><p><img title="nidfrelonsstmarcellin.jpeg" src="http://dev.arnaudpoo.fr\/assets/upload/nidfrelonsstmarcellin.jpg" alt="" width="459" height="612" data-mce-src="http://dev.arnaudpoo.fr\/assets/upload/nidfrelonsstmarcellin.jpg"></p><p>nid de guêpes de Corrençon :</p><p><img title="nid-guepes-correncon.jpeg" src="http://dev.arnaudpoo.fr\/assets/upload/nid-guepes-correncon.jpg" alt="" width="635" height="744" data-mce-src="http://dev.arnaudpoo.fr\/assets/upload/nid-guepes-correncon.jpg"></p></body>
    Je pense donc la cibler avec le sélecteur img#tinymce.
    J'ai donc essayé ce CSS :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    img#tinymce {
      width:50%;
    }
    mais il ne se passe rien et même cette règle CSS n'est pas visible dans l'inspecteur si je clique sur la balise de l'image...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Bonjour,
    j'ai l'impression que tu en demandes trop à l'éditeur tinyMCE, ce n'est pas son job que de faire de la mise en page poussé, il te faut mettre les mains dans le cambouis (façon de parler bien sûr) !

    Tu peux néanmoins, lors de l'insertion d'une image mettre sa largeur à 100% dans la boîte de dialogue.

  6. #6
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Même si l'utilisateur prévu sera réduit à une seule personne et donc qu'il est possible de lui expliquer comment faire (je viens de le faire : https://pasdpanique.fr/admin-actu-form-maj?id=10), ça n'a rien d'intuitif, donc je préfère mettre les mains dans le cambouis...Si y a pas une directive qui va bien à mettre dans tinymce.init.

    Peux-tu m'aider ? (j'ai pas une formation de garagiste et j'y connais rien en mécanique )
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  7. #7
    Membre éclairé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    343
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 343
    Points : 697
    Points
    697
    Par défaut
    Le sélecteur img#tinymce cible les balises img qui possèdent un attribut id="tinymce", ce qui ne correspond pas à ton html car les balises img n'ont pas d'attribut id.

    Tu peux essayer le sélecteur #tinymce img pour cibler toutes les balises img qui sont enfant d'un élément ayant un attribut id="tinymce".

  8. #8
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Merci de m'avoir corrigé.
    Par contre, ça ne change rien. En outre, cette règle CSS n'est toujours pas visible dans la console.
    En local (donc pas visible en ligne), j'ai fait l'essai suivant :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
    <h1>Pas d'Panique, entreprise de désinsectisation de nids de guêpes et de frelons sur le Vercors et alentours</h1>
    <img title="nid.jpeg" src="assets/upload/nid.jpg" alt="" width="768" height="1024" data-mce-src="assets/upload/nid.jpg">
    <div>
        <form id="div_tinymce" method="post" name="edit" action="/admin-actu-save">
            <input type="hidden" name="id" value="326">
            <input type="date" name="date" value="2023-11-02">
            <textarea name="actu" id="file-picker" style="display: none;" aria-hidden="true"><p>Ceci est la premi&egrave;re actu du 01/11</p>
    <p>&nbsp;</p>
    <p  >1e image :</p>
    <p>&nbsp;</p>
    <p><img title="nid.jpeg" src="http://dev.arnaudpoo.fr\/assets/upload/nid.jpg" alt="" width="768" height="1024"></p>
    <p>&nbsp;</p>
    <p>modif</p></textarea>
            ...
            <input type="submit" value="envoyer">
        </form>
    </div>
    En gros, avant le formulaire, j'ai mis l'image. Pour être sûr de pas me tromper dans le CSS, j'ai mis :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    img {
    width:50%;
    }
    Avec cela, l'image que j'ai rajoutée est responsive mais pas celle introduite avec tinymce. Le fait que ça soit à l'intérieur d'une iframe est peut-être la raison.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <iframe id="file-picker_ifr" frameborder="0" allowtransparency="true" title="Zone de Texte Riche" class="tox-edit-area__iframe"></iframe>

    Dans la iframe, y a un code html (head et body), dont voici le body :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p>Ceci est la première actu du 01/11</p><p><br data-mce-bogus="1"></p><p>1e image :</p><p><br data-mce-bogus="1"></p><p><img title="nid.jpeg" src="http://dev.arnaudpoo.fr\/assets/upload/nid.jpg" alt="" width="768" height="1024" data-mce-src="http://dev.arnaudpoo.fr\/assets/upload/nid.jpg"></p><p><br data-mce-bogus="1"></p><p>modif</p>

    Remarque : si, dans l'inspecteur, je fais "copier l'intérieur du html", ça met ce que donnerait un CTRL+U et pas ce qui est affiché l'écran (par exemple, le <iframe> n'est pas visible)
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Avec cela, l'image que j'ai rajoutée est responsive mais pas celle introduite avec tinymce. Le fait que ça soit à l'intérieur d'une iframe est peut-être la raison.
    Si tu appliques la règle CSS (*)
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #tinymce img {
      max-width: 50%;
    }
    cela ne sera valable que dans l'environnent de ton éditeur TinyMCE.

    Lorsque tu afficheras le contenu HTML de l'article saisi dans une page cette règle ne s'appliquera plus, ne sera plus connue, il te faut donc également la reporter dans le CSS de ta page.

    J'espère que c'est bien de cela dont tu parles, le rendu dans une page hors de l'environnement de l'éditeur.


    (*) Cette règle est à ajouter dans ton tinymce.init à la propriété content_style

  10. #10
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Bravo
    grâce à ton conseil, le rendu est bien responsive en dehors de l'éditeur (avec
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px };#tinymce img { max-width: 50%;};'
            });
    ), mais je voudrais qu'il le soit aussi à l'intérieur de l'éditeur. Est-ce possible et comment faire ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Citation Envoyé par laurentSc
    grâce à ton conseil, le rendu est bien responsive en dehors de l'éditeur (...
    euh ! je dirais l'inverse, le fait d'ajouter des règles à prendre en compte dans content_style font que celles-ci s'appliquent à l'éditeur et n'impactent pas le HTML envoyé au serveur.

    Il faut donc bien prendre en compte ces mêmes règles dans le CSS de la page d'affichage.


    Je reviens sur :
    Citation Envoyé par NoSmoking
    Tu peux néanmoins, lors de l'insertion d'une image mettre sa largeur à 100% dans la boîte de dialogue.
    ... tu peux également supprimer la notion de dimension pour les images en ajoutant image_dimensions: false, dans les paramètres de ton tinymce.init , voir https://www.tiny.cloud/docs/tinymce/...age_dimensions

  12. #12
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    euh ! je dirais l'inverse, le fait d'ajouter des règles à prendre en compte dans content_style font que celles-ci s'appliquent à l'éditeur et n'impactent pas le HTML envoyé au serveur.

    Il faut donc bien prendre en compte ces mêmes règles dans le CSS de la page d'affichage.
    Je ne te saisis pas car ayant appliqué la modif que tu m'as indiquée, cette page https://pasdpanique.fr/actualites est bien responsive (et l'affichage est bien en dehors de l'éditeur) alors que si j'affiche les actus dans l'éditeur (pas de lien car il faut s'identifier), les images ne sont pas responsives...Et tu sembles dire que c'est l'inverse

    Citation Envoyé par NoSmoking Voir le message
    Je reviens sur :
    ... tu peux également supprimer la notion de dimension pour les images en ajoutant image_dimensions: false, dans les paramètres de ton tinymce.init , voir https://www.tiny.cloud/docs/tinymce/...age_dimensions
    OK

    Par contre, tu ne réponds à la question que je posais post #10. Le sais-tu ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    ... est bien responsive (et l'affichage est bien en dehors de l'éditeur) ...
    tu oublies que dans le CSS de ta page on trouve la règle suivante :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    img {
      max-width: 100%;
      height: auto;
    }
    qui rend tes images adaptables.
    Fichier : https://pasdpanique.fr/assets/css/style.css, ligne 151.


    Par contre, tu ne réponds à la question que je posais post #10. Le sais-tu ?
    J'y ai déjà répondu indirectement, il te suffit de mettre la(es) règle(s) que tu souhaites voir appliquée(s) dans content_style.

    Tu peux faire un essai en mettant par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    tinymce.init({
      // ...
      // https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions
      image_dimensions: false,
      content_style: 'body { font-family:Verdana,Arial,sans-serif; font-size:1em } img { max-width: 50%;height: auto; border:4px solid blue}',
    });
    Vide le cache et relance, les images dans ton éditeur devraient, doivent, être encadrées en bleu sinon le soucis est ailleurs.

  14. #14
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Vide le cache et relance, les images dans ton éditeur devraient, doivent, être encadrées en bleu sinon le soucis est ailleurs.
    Essai fait, donc le problème est ailleurs, vu que les images ne sont pas encadrées. Mais où ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    A vérifier que tu utilises bien le fichier modifié, qu'il n'y a pas d'erreur dans la console ...

  16. #16
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Dans la console, ce message d'erreur :
    Cette page utilise la propriété non standard « zoom ». Envisagez d’utiliser calc() dans les valeurs des propriétés pertinentes ou utilisez « transform » avec « transform-origin: 0 0 ». admin-actu-form-maj
    et comme source, ça me donne tout le tinymce.init. Que faire ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  17. #17
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    ce message d'erreur
    tu peux oublier.

    comme source, ça me donne tout le tinymce.init
    j'ai cru comprendre que ton code JavaScript était intégrer dans une page PHP, voir autre discussion, il te faut donc regarder via un Ctrl + U, le code de la page générée et vérifier que les données dans le tinymce.init sont biens les bonnes.

    Sinon je ne vois pas comme cela ce qui pourrait engendrer ce trouble .

  18. #18
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Exact, tout est intégré dans du PHP.

    UN CTRL+U donne :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
     <script>
            tinymce.init({
                selector: 'textarea#file-picker',
                ui_mode: 'split',
                resize: 'both',
                statusbar: false,
                language_url: "assets/js/tymce_fr_fr.js",   // ici le chemin d'accès au fichier de traduction
                language : "fr_FR",
                plugins: 'image code',
                toolbar: 'undo redo | styles | bold italic | link image ',
     
                /* enable title field in the Image dialog*/
                image_title: true,
                /* enable automatic uploads of images represented by blob or data URIs*/
                automatic_uploads: true,
                /*
                URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
                images_upload_url: 'postAcceptor.php',
                here we add custom filepicker only to Image dialog
                */
                images_upload_url: "http://dev.arnaudpoo.fr/admin-upload",
     
                file_picker_types: 'image',
                /* and here's our custom image picker*/
                file_picker_callback: function (cb, value, meta) {
                    let input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
     
                    /*
                    Note: In modern browsers input[type="file"] is functional without
                    even adding it to the DOM, but that might not be the case in some older
                    or quirky browsers like IE, so you might want to add it to the DOM
                    just in case, and visually hide it. And do not forget do remove it
                    once you do not need it anymore.
                    */
     
                    input.onchange = function () {
                        let file = this.files[0];
     
                        let reader = new FileReader();
                        reader.onload = function () {
                            /*
                            Note: Now we need to register the blob in TinyMCEs image blob
                            registry. In the next release this part hopefully won't be
                            necessary, as we are looking to handle it internally.*/
     
                            //var id = 'blobid' + (new Date()).getTime();
                            let id = file.name.split(".")[0]; // alert('head 50 filename='+file.name);      // mettre ici le nom du fichier
                            let blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                            let base64 = reader.result.split(',')[1];
                            let blobInfo = blobCache.create(id, file, base64);
                            //var blobInfo = blobCache.create(id);
                            blobCache.add(blobInfo);
     
                            /* call the callback and populate the Title field with the file name */
                            cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };
     
                    input.click();
                },
                /*content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px };#tinymce img { max-width: 50%;};'*/
                        image_dimensions: false,
                content_style: 'body { font-family:Verdana,Arial,sans-serif; font-size:1em }; img { max-width: 50%;height: auto; border:4px solid blue}'
            });
        </script>
    A la ligne 66, on retrouve bien le CSS que tu m'avais conseillé...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  19. #19
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 048
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Difficile d'en dire plus sans pouvoir tester la page et son contexte, avec cette même config je ne rencontre pas de souci

  20. #20
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 430
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 430
    Points : 5 784
    Points
    5 784
    Billets dans le blog
    1
    Par défaut
    Pour te permettre de tester, j'ai modifié temporairement le mot de passe pour s'identifier et accéder à la zone admin : VULCAIN
    Pour s'identifier : https://pasdpanique.fr/identification
    Une fois identifié (et si pas fait, on revient à la page d'accueil), une page qui utilise tinymce (pour modifier une actu existante) : lien supprime.

    C'était plus sûr que tenter de créer un autre site (risque de ne pas reproduire le même environnement)

    [EDIT]j'ai supprimé le lien car le temps où je suis connecté, il fonctionne
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Réponses: 1
    Dernier message: 04/04/2023, 14h56
  2. Réponses: 12
    Dernier message: 17/02/2010, 16h59
  3. [OpenOffice][Texte] Comment les images sont-elles stockées avec open office?
    Par LGnord dans le forum OpenOffice & LibreOffice
    Réponses: 0
    Dernier message: 26/06/2009, 14h21
  4. Les images sont des légendes
    Par totof49 dans le forum Langage
    Réponses: 16
    Dernier message: 14/05/2009, 17h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo