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

Astuces ForumactifConnexion

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Le Deal du moment : -59%
TEFAL Marmite 28 cm inox – Tous feux dont ...
Voir le deal
21.99 €

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

more_horiz
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

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

more_horiz
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;}

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

more_horiz
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 .

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

more_horiz
Merci Phil, très pratique  fr4

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

more_horiz

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

more_horiz
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

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

more_horiz
merci Philippe  clin oeil

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

more_horiz
Merci beaucoup !

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

more_horiz
Merci beaucoup !

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

more_horiz
Merci beaucoup !

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

more_horiz
Merci beaucoup !

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

more_horiz
Merci

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

more_horiz
Merci beaucoup

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

more_horiz
Merci beaucoup

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

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