QUICKREPLY - couleur noire en mode WYSIWYG

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir,

je me permets de venir vers vous, car après des tests sur tous les codes que FA a proposé pour mettre la couleur du texte du quickreply en blanc lors du passage en WYSIWYG, ces derniers ne fonctionnent pas.



Comme vous le voyez, que je mette le JS de Chattigre ou d'autres utilisateurs, cela n'impacte l'écriture noire de mon mode WYSIWYG SOUS QUICKREPLY. Car oui, le code que FA fournit marche très bien pour lorsque je clique sur "répondre" et que je rentre dans la page de post.

Que faire ?

Merci à vous.

[Kaehlyth]

Je me permets un UP de la demande.

[chattigre]

Bonjour,

Pourriez-vous me redonner le lien / contenu du code que vous avez mis que je puisse resituer son fonctionnement ?

Merci d'avance

[Kaehlyth]

Bonsoir chattigre,

voici les codes :

Code:



1- $(function(){$(function(){$(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#fff!important;}</style>")})});
 
1- bis par Chatigre : $(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}");
  });
});
 

2- .sceditor-container iframe, .sceditor-container textarea {background:url(https://i.servimg.com/u/f44/20/41/07/60/fondme14.png)!important;
margin: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 5px !important; height:200px !important;color: #FFFFFF!important;}

Comme l'image le démontre, en page "Poster" le texte est bien en antiquewhite (couleur que j'ai choisi) mais le tableau bbcode reste en noir...
Et pour ce qui est du "quickreply", ce dernier reste noir même pour le texte standard.

Cordialement

[Scoubifitz]

Bonsoir,

Désolé de m'incruster ...
    Modifier l'apparence de l'éditeur
1 - Modifier la réponse rapide

avez-vous testé ceci dans la feuille de style de base (comme le JS ne fonctionne pas ):

Code:

    /*--- Bloc réponse rapide ---*/
    
    .sceditor-container.ltr.sourceMode {
    background-color: #ffffff !important;
    }
    .sceditor-container.ltr.wysiwygMode {
    background-color: #ffffff !important;
    }

[Kaehlyth]

Bonsoir,

Désolé de m'incruster ...
    Modifier l'apparence de l'éditeur
1 - Modifier la réponse rapide

avez-vous testé ceci dans la feuille de style de base (comme le JS ne fonctionne pas    ):

Code:

    /*--- Bloc réponse rapide ---*/
    
    .sceditor-container.ltr.sourceMode {
    background-color: #ffffff !important;
    }
    .sceditor-container.ltr.wysiwygMode {
    background-color: #ffffff !important;
    }

Oui, le code est actif dans ma feuille de style et ne fonctionne guère…

Voici tout mon css en place :

Code:

/*=================== REPONSE RAPIDE EMPLACEMENT =================**/
/* Réponse Rapide personnalisation des TR */
#rep-rapide .forumline {position: relative; /* Assurez-vous que .forumline est positionné relatif ou absolu si nécessaire */z-index: 999;}
#rep-rapide .row2 {-moz-box-shadow: none !important;-webkit-box-shadow: none !important;background-image: none !important;}
#rep-rapide {margin-left: 0em;background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgb(23 19 45 / 66%));}
.infocash {background: linear-gradient(to left,rgba(184,145,113,0.21),rgb(23 19 45 / 66%));bottom: 0;left: 0;z-index: 1;}

form#quick_reply {height: 18em;z-index:100;margin-left: -7px;margin-top:-0.5em;}
form#quick_reply textarea#text_editor_textarea {margin-top:1em; margin-bottom:0em;height: 18.2em;;width:50em; background:none;box-shadow: none;z-index:100;}
form#quick_reply table { width: 61.7em;z-index:100;}
#av_quickreply img {max-height:160px !important; /* définit la hauteur maximale de l'avatar */max-width:100px !important; /* définit la largeur maximale de l'avatar */z-index:100;}
#av_quickreply {position:absolute;left:45px; /* changez "left" en "right" pour positionner l'avatar à droite */top:45px;z-index:100;}
#quick_reply table tr:last-child td {background: none;z-index:100;}
/*=================== COULEUR ZONE DE TEXTE =================**/
input, select, textarea {background-color: #202020;}
.postbody{padding-left:10px;padding-right: 10px;text-align:justify;font-size:15px;color: #FFFFFF!important;text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;}
.sceditor-container{width: 98% !important;margin: 10px auto !important; background:url("")!important;
background-repeat : repeat!important;border: 1px solid #777777 !important;-webkit-box-shadow: 0px 1px 5px #FCEFC9;box-shadow: 0px 1px 5px #FCEFC9;color: #FFFFFF!important;}
.sceditor-toolbar{ background:url("")!important;border-bottom: 1px solid #000000 !important;-webkit-box-shadow: 0px 1px 5px #FCEFC9;box-shadow: 0px 1px 5px #FCEFC9;}
.sceditor-group{background:url("")!important; border: 1px outset #ffffff !important;border-radius: 5px !important;-webkit-box-shadow: 0px 1px 5px #FCEFC9;box-shadow: 0px 1px 5px #FCEFC9;}
a.sceditor-button{background:#777777!important;border-radius: 20px !important;}
a.sceditor-button:hover{background: #ffffff !important;-webkit-box-shadow: 0px 1px 5px #FCEFC9;box-shadow: 0px 1px 5px #FCEFC9;}
a.sceditor-button.active{ background: #ffffff !important;-webkit-box-shadow: 0px 1px 5px #FCEFC9;box-shadow: 0px 1px 5px #FCEFC9;}
.sceditor-container iframe, .sceditor-container textarea {background:url(https://i.servimg.com/u/f44/20/41/07/60/fondme14.png)!important;
margin: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 5px !important; height:200px !important;color: #FFF!important;}
/*on masque les smileys*/
#sceditor_smilies body{background: #trans !important; display:none;}
#smileyContainer{border: 3px solid #000000;display:none;}
#smileyContainer iframe{height: 280px !important;overflow: auto !important;display:none;}
.M14_parent_editor_simple td#smileyContainer iframe{width:100%;}
/*on masque certains boutons*/
a.sceditor-button.sceditor-button-emoticon, a.sceditor-button.sceditor-button-twemojifa,a.sceditor-button.sceditor-button-date,a.sceditor-button.sceditor-button-time,
a.sceditor-button.sceditor-button-faspoiler,a.sceditor-button.sceditor-button-servimg,a.sceditor-button.sceditor-button-table  {
display: none;}

/* BOUTONS REPONSES - animation radar */
a.sceditor-button{border-radius: 20px !important;box-sizing: unset !important;background: #a8a8a8 !important;margin : 0px 2px;-webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
a.sceditor-button:hover{background: #D1CFCF !important;box-sizing: unset !important;margin : 0px 2px;cursor: pointer;-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);}

/* EDITION CHANGE EN HORS JEU */
/*Contenant de l'édition*/.message-container{margin-left:68px;max-width: 89%;min-height:84px;}
/*Commentaire laissé par xxx*/.Edit_first{font-family: 'Caudex';font-size: 16px;font-weight: 900;font-style: oblique;display: inline-block;margin-top: -35px;text-align:center;}
/*Reste de l edition*/.M14_edit{color:#dfbc9f;text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black;text-align:justify;font-size: 14px;}
.Edit_animation {position: relative;padding: 16px; /* 10px de padding + 6px de bordure */margin-top: 10px;background: linear-gradient(to left,rgba(184,145,113,0.21),rgb(23 19 45 / 66%)),url(https://zupimages.net/up/24/28/g650.png) right;
border-radius: 8px;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), /* Ombre intérieure */0 0 15px rgba(0, 0, 0, 0.4); /* Ombre extérieure */overflow: hidden; /* Pour que le pseudo-élément ne dépasse pas les bords arrondis */}
.Edit_animation::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 6px solid transparent;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.1;
    transition: opacity 0.3s, border-image 0.3s;
}

.Edit_animation:hover::before {
    border-image: url(https://jooinn.com/images/wood-panel-texture-6.jpg) 30 round;
    opacity: 1;
    z-index: 100;
}
/*édition sans donner de raison*/.Edit_animation_first{}

[Scoubifitz]

voici les codes :

Code:


1- bis par Chatigre : $(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}");
  });
});
 

Trouvé !  ... à remplacer par :

Code:

$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p,table,td{color:antiquewhite ;border-color:antiquewhite}");
  });
});

[Kaehlyth]

Hélas j'avais tenté...et que nenni.
Ça fonctionne pour le bouton "répondre" mais pas le quickreply. Par contre, grande avancée. Même le code bbcode est en blanc à présent !

À croire que le SCMPLAYER joue sûrement des tours ?

[Scoubifitz]

Bizarre ... j'ai pourtant l'editeur WYSIWYG et quickreply avec la même couleur de texte .

un autre script pour quickreply qui pourrait gêner ?

désactiver les scripts un par un pour trouver le coupable ?

édit : 22:38:33 :

en mettant un " !important " au script ? Je pense que le CSS externe met la pagaille , parce qu'il est en fin de "head" et qu'il prend le pas sur le reste .

Code:

    $(function() {
      var a = $("#text_editor_textarea");
      0 != a.length && $(function() {
        a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p,table,td{color:antiquewhite !important;border-color:antiquewhite !important}");
      });
    });

[Kaehlyth]

Le CSS externe est TOUT mon CSS hormis les derniers ajouts qui étaient des tests et vont finir dans le CSS mis sur Dropbox.

Ça ne change rien pour le coup.

C'est un mystère.

[Scoubifitz]

Avez-vous tenté de désactivé vos scripts un après l'autre ?

ou de désactiver le CSS externe temporairement , le temps de vérifier si le JS fonctionne ?

D'ailleurs , je vous mets un script mieux adapté pour l'edition du tableau en WYSIWYG :

remplacez le script précédent par celui-ci :

Code:

$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css('body,p,table,td{color:antiquewhite !important;}table.msotablegrid1{margin:0 auto;border-collapse: separate;border-spacing:5px 10px; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; empty-cells: hide;}.msotablegrid1 td{background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover;border: 2px solid rgb(237, 125, 49); padding: 0 5px;height: 30px;width:70px; border-radius: 5px;}.msotablegrid1 .chiffres{background-image:none!important;background-color:#423030;width: 50px;}.msotablegrid1 div[align="center"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#ed7d31;margin:2px 0;}.msopercenttable{margin: 0 auto;}.msospectitle div[align="left"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#795548;margin:-12px 0 5px; padding:5px 3px;}.msotablegrid1 .msocomm{background-image:none!important;background-color:#423030;}');
  });
});
$(function(){
   $(function(){
      $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table,div{color:antiquewhite !important;}</style>")
   })
});

[Kaehlyth]

Si je supprime mes JS (désactive), le forum est TELLEMENT déformé, que ce ne serait pas ça.

Quant au CSS, rien n'est en conflit avec le Quick REPLY... Donc c'est un vrai casse-tête.

Pour le script c'est parfait, je vois le CSS du tableau !
Il y a juste un espace étrangement long qui se crée entre le HTML et le bbcode.

[Scoubifitz]

C'est le souci du tableau quand on l'édite ( vieux de plus de 10 ans ... )

https://forum.forumactif.com/t358189-1516-editeur-suspendu-retour-a-la-ligne-bizarrement-resolu-pour-les-tableaux#3044979

[Kaehlyth]

C'est le souci du tableau quand on l'édite ( vieux de plus de 10 ans ... )

https://forum.forumactif.com/t358189-1516-editeur-suspendu-retour-a-la-ligne-bizarrement-resolu-pour-les-tableaux#3044979

Flûte je remue le couteau dans la plaie..

En tout cas, merci pour le visuel. Il est très étrange nonobstant le fait qu'il est visuellement plus abordable ! (Je ne peux pas agrandir la fenêtre de Quick REPLY donc ça donne des situations cocasses ..)

[Scoubifitz]

...

Pour le coupable du Quick REPLY , c'est lui !

Code:

<!-- Ajout kit fontawesome  --><script src="https://kit.fontawesome.com/43e0b7e7bf.js" crossorigin="anonymous">

dans un template , je pense ... avant la balise de fermeture du "head" .

je ne sais pas ce qu'il y a dedans , mais quand je le place sur le forum test , ça désactive le CSS du Quick REPLY ...

[Kaehlyth]

Il s'agit du script qui permet d'afficher les petites icônes du profil en responsive .. bah mince alors 🧐.

[Scoubifitz]

ok ....

si c'est dans le overall header , placez le script après le { CSS } en début de template et supprimez le de la fin :

Code:


   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
   {T_HEAD_STYLESHEET}
   {CSS}
  <!-- Ajout kit fontawesome --><script src="https://kit.fontawesome.com/43e0b7e7bf.js" crossorigin="anonymous"></script>

[Kaehlyth]

ok ....

si c'est dans le overall header , placez le script après le { CSS } en début de template et supprimez le de la fin  :

Code:


 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
 {T_HEAD_STYLESHEET}
 {CSS}
  <!-- Ajout kit fontawesome --><script src="https://kit.fontawesome.com/43e0b7e7bf.js" crossorigin="anonymous"></script>

Code:

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/v1b7h19tdfb4z4hhtzarl/Albastrya-CSS.css?rlkey=lymzwtca65pkmi713uvfxcqqa&st=f889gtgh" />

   <!-- Ajout kit fontawesome -->
      <script src="https://kit.fontawesome.com/43e0b7e7bf.js" crossorigin="anonymous"></script>
</head>    

Apparemment ce script rentre dans le head pour être efficient et n'apparait qu'une fois
Et même si je le supprime, je ne peux pas toucher le quick reply en terme de taille.

Mais on dévie du texte en noir même si cela doit être conjoint.
J'avais déjà ce soucis quand mon CSS était non extérieur.

[Scoubifitz]

après de multiples essais , je ne trouve pas ...

Comme l'éditeur WYSIWYG et le Quick REPLY sont dans une IFRAME , ils ne sont modifiable que par un script , qu'il soit interne ou externe.

Désolé de ne pas pouvoir vous aider plus , je passe mon tour à quelqu'un de plus persévérant .

[Kaehlyth]

Je me permets un up.

[Kaehlyth]

[Kaehlyth]

Bonjour,

Toujours d'actualité.
Merci à tous.

[Milouze14]

Hello Kaehlyth,
tu peux tester ce script ( a cocher sur toutes les pages) :

Pour le MODE WYSIWYG

Code:



//couleur MODE WYSIWYG
$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:#fff}");
  });
});


Et ajouter ce style dans ta feuille de style pour l'autre mode :

Code:

.sceditor-container textarea{color:#fff!important;}

a++

[Kaehlyth]

Hello Kaehlyth,
tu peux tester ce script ( a cocher sur toutes les pages) :

Pour le MODE WYSIWYG

Code:



//couleur MODE WYSIWYG
$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:#fff}");
  });
});


Et ajouter ce style dans ta feuille de style pour l'autre mode  :

Code:

.sceditor-container textarea{color:#fff!important;}

a++

Bonsoir, hélas ça ne marche pas ...

[Milouze14]

Re,
je vois que sur ton forum que tu as des scripts concernant déjà l'éditeur:

Code:

$(function() {
    var a = $("#text_editor_textarea");
    0 != a.length && $(function() {
        a.sceditor && a.sceditor("instance") && a.sceditor("instance").css('body,p,table,td{color:antiquewhite !important;}table.msotablegrid1{margin:0 auto;border-collapse: separate;border-spacing:5px 10px; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; empty-cells: hide;}.msotablegrid1 td{background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover;border: 2px solid rgb(237, 125, 49); padding: 0 5px;height: 30px;width:70px; border-radius: 5px;}.msotablegrid1 .chiffres{background-image:none!important;background-color:#423030;width: 50px;}.msotablegrid1 div[align="center"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#ed7d31;margin:2px 0;}.msopercenttable{margin: 0 auto;}.msospectitle div[align="left"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#795548;margin:-12px 0 5px; padding:5px 3px;}.msotablegrid1 .msocomm{background-image:none!important;background-color:#423030;}')
    })
});
$(function() {
    $(function() {
        $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table,div{color:antiquewhite !important;}</style>")
    })
});

Il faut les supprimer dans un premier temps .

a++

[Kaehlyth]

Re,
je vois que sur ton forum que tu as des scripts concernant déjà l'éditeur:

Code:

$(function() {
    var a = $("#text_editor_textarea");
    0 != a.length && $(function() {
        a.sceditor && a.sceditor("instance") && a.sceditor("instance").css('body,p,table,td{color:antiquewhite !important;}table.msotablegrid1{margin:0 auto;border-collapse: separate;border-spacing:5px 10px; background-image: url(https://zupimages.net/up/24/29/dhid.jpg); background-repeat: repeat; empty-cells: hide;}.msotablegrid1 td{background: linear-gradient(to left, rgba(184, 145, 113, 0.21), rgba(23, 19, 45, 0.66)), url(https://zupimages.net/up/24/28/g650.png) no-repeat center center; background-size: cover;border: 2px solid rgb(237, 125, 49); padding: 0 5px;height: 30px;width:70px; border-radius: 5px;}.msotablegrid1 .chiffres{background-image:none!important;background-color:#423030;width: 50px;}.msotablegrid1 div[align="center"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#ed7d31;margin:2px 0;}.msopercenttable{margin: 0 auto;}.msospectitle div[align="left"]:first-child {border: 2px solid rgb(237, 125, 49); border-radius: 5px;background-color:#795548;margin:-12px 0 5px; padding:5px 3px;}.msotablegrid1 .msocomm{background-image:none!important;background-color:#423030;}')
    })
});
$(function() {
    $(function() {
        $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table,div{color:antiquewhite !important;}</style>")
    })
});

Il faut les supprimer dans un premier temps .

a++

J'ai déjà testé et j'ai remis cette version puisque cela ne fonctionnait pas.

Cordialement

[Stefano123]

Bonjour à toutes et tous,

Désolé de m'immiscer dans votre sujet, juste une petite question !!

Kaehlyth,

Dans votre Feuille de style, vous avez ce code "Body" ceci peut être à l'origine de la couleur noire !
Enfin, je dis ça !! Je n'en suis vraiment pas sûr

Code:

body {
  color: #111;
}

J'ai essayé de chercher d'où cela pouvait provenir avec ma petite connaissance, mais en vain !!  Navré...

Cordialement,

[Milouze14]

Salu Kaehlyth,
hello Stéfano .

J'ai déjà testé et j'ai remis cette version puisque cela ne fonctionnait pas

je me suis enregistré sur ton forum, il y a un nombre incalculable d'erreur sur des Javascripts dumoins sur la réponse rapide,
il faudrait voir de ton côté ce qui peut clocher.

Sur mon forum phpbb2 et avec ce script:

Code:

//couleur MODE WYSIWYG
$(function() {
  var a = $("#text_editor_textarea");
  0 != a.length && $(function() {
    a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:#fff}");
  });
});

Et cette CSS:

Code:

.sceditor-container textarea{color:#fff!important;}

J'obtiens satisfaction.

a++

[Kaehlyth]

Bonsoir,

j'entends bien oui, avec les javascripts sont soient vieux, soit adaptés avec des codes fait récemment avec l'édition.
Sans compter que mon forum est hébergé via javascript sur un autre site (SCMPLAYER) qui peut éventuellement faire apparaître des erreurs.

Si vraiment des codes ont des erreurs, je n'hésiterai pas à les fournir car les codes que vous avez n'obtiennent pas satisfaction ici.
La cause sûrement à ces fameux codes dépassés ?

Merci à vous tous en tout cas.

[Milouze14]

Re,

avec les javascripts sont soient vieux, soit adaptés avec des codes fait récemment avec l'édition.
Sans compter que mon forum est hébergé via javascript sur un autre site (SCMPLAYER) qui peut éventuellement faire apparaître des erreurs.

c'est même une évidence à ma connaissance,
en attendant je laisse ma place et tu pourras supprimer mon compte sur ton forum stp .
Bonne continuation.

a++