Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

+5
fred9545
chrisnvidia
Morane
photoclic
Milouze14
9 participants

Aller en bas

Icône par defaut [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Milouze14 Jeu 7 Mar 2019 - 18:55

Hello les ami(e)s,

l'astuce suivante permettra à vos membres de voir si l'éditeur est en mode Wysiwyg :
(ce que vous tapez est ce que vous verrez) ou en mode html (texte).

L'avantage est qu'au clic sur le bouton permettant de changer de mode,
le message sera instantané avec une légère transition  clin oeil .

Les aperçus imagés:

Insertion d'un Smiley en mode html (texte)

[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 1189

Insertion d'un Smiley en mode Wysiwyg

[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 254


[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte Editeur


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettez un titre explicite.
Cochez sur toutes les pages.


Déposez ceci:
Code:

$(function() {
$(function() {
$editor = $('.sceditor-container');
var a =$editor.hasClass('wysiwygMode');
var b =$editor.hasClass('sourceMode');
  
//LE TEXTE POUR LE MODE WYSIWYG
var visu="Ce que vous voyez est ce que vous obtenez";
//LE TEXTE POUR LE MODE HTML  
var html="Mode texte";
  
$('.sceditor-container').before('<div id="M14_EDITOR"></div>');  
if(a){$('#M14_EDITOR').text(visu); }if(b){$('#M14_EDITOR').text(html);}
$('a.sceditor-button.sceditor-button-source').click(function(){
var c=$(this).hasClass('hover');var d=$(this).not('hover');
if(c){$('#M14_EDITOR').fadeOut().fadeIn().text(html); }
else if(d){ $('#M14_EDITOR').fadeOut().fadeIn().text(visu);}
});})});



Pensez a cliquer sur le bouton Valider


Vous pouvez changer le texte de chacun ici entre les guillemets:
Code:
//LE TEXTE POUR LE MODE WYSIWYG
var visu="Ce que vous voyez est ce que vous obtenez";
//LE TEXTE POUR LE MODE HTML  
var html="Mode texte";







Puis le style, que vous pouvez modifier comme bon vous semble:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
Code:

#M14_EDITOR
{
background-color: #666 !important;
color: #fff;
font-size: 12px;
font-style: italic;
text-align:center;
padding: 4px;
height: 14px;
line-height: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 5px;
box-sizing: content-box;
}




Pensez à valider les modifications en cliquant sur le bouton Valider


Vous pouvez aussi changer les icônes avec ce style:

Code:

/*Bouton wysiwyg */
a.sceditor-button.sceditor-button-source:not(.hover) div
{
background:url(https://i.servimg.com/u/f87/11/26/21/37/keyboa10.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
/*Bouton html */
a.sceditor-button.sceditor-button-source.hover div
{
background:url(https://i.servimg.com/u/f87/11/26/21/37/docume10.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
}








Dernière édition par Milouze14 le Lun 29 Nov 2021 - 16:34, édité 9 fois
Milouze14
Milouze14
Fondateur



https://www.milouze14.com

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par photoclic Jeu 7 Mar 2019 - 20:25

Merci beaucoup !

Excellent Philippe!

ça complète parfaitement cette astuce: https://www.milouze14.com/t31647-toutes-versionsfond-different-en-fonction-du-mode-d-edition

Pour laquelle on peut aussi colorier le bouton comme le fond ainsi:
Code:
/*Bouton wysiwyg idem fond */
a.sceditor-button.sceditor-button-source:not(.hover){background:#cde9ff;}
avatar
photoclic
Milouzien



https://photoclic.forum-pro.fr/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Milouze14 Ven 8 Mar 2019 - 5:51

Hello Serge,
oui mais ce script est instantané lors du clic contrairement à l"autre clin oeil .

Je viens d'ailleurs d'ajouter le lien de cette astuce pour l'occasion impeccable .

Milouze14
Milouze14
Fondateur



https://www.milouze14.com

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Morane Ven 8 Mar 2019 - 10:33

Merci Phil, très pratique  fr4
avatar
Morane
Milouzien



https://www.milouze14.com/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par chrisnvidia Ven 8 Mar 2019 - 18:39

chrisnvidia
chrisnvidia
Milouzien



https://sos-pc.forumactif.org/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Milouze14 Sam 9 Mar 2019 - 5:54

Hello les ami(e)s,
je viens d'ajouter un style si toutefois vous désiriez changer les icônes
dans les deux modes clin oeil


Dernière édition par Milouze14 le Sam 9 Mar 2019 - 19:47, édité 1 fois
Milouze14
Milouze14
Fondateur



https://www.milouze14.com

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Quad Daniel Sam 9 Mar 2019 - 7:57

merci Philippe  clin oeil
Quad Daniel
Quad Daniel
Animateur blagueur



https://www.quadsalvetain.com/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par fred9545 Sam 9 Mar 2019 - 9:59

Merci beaucoup !
fred9545
fred9545
Milouzien



http://www.mecanique-auto.com/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Invité Jeu 14 Mar 2019 - 1:39

Merci beaucoup !
Anonymous
Invité
Invité


Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par hamesashek Sam 23 Mar 2019 - 16:45

Merci beaucoup !
hamesashek
hamesashek
Milouzien



http://3arb-way.a7larab.net/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Invité Dim 24 Mar 2019 - 1:05

Merci beaucoup !
Anonymous
Invité
Invité


Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Ptite_Perle Jeu 28 Mar 2019 - 20:56

Merci
Ptite_Perle
Ptite_Perle
Milouzien



https://forumcrea.forumactif.org/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Chéryl Sam 30 Mar 2019 - 9:55

Merci beaucoup
Chéryl
Chéryl
Blocage


https://graphismelesangesden.forumactif.org/

Revenir en haut Aller en bas

Icône par defaut Re: [TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte

Message par Quad Daniel Sam 30 Mar 2019 - 10:03

Merci beaucoup
Quad Daniel
Quad Daniel
Animateur blagueur



https://www.quadsalvetain.com/

Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum