Membres connectés récemment
[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte
+4
fred9545
chrisnvidia
photoclic
Milouze14
8 participants
Page 1 sur 1 • Partagez
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 .
Les aperçus imagés:
Insertion d'un Smiley en mode html (texte)
Insertion d'un Smiley en mode Wysiwyg
Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript
Mettez un titre explicite.
Cochez sur toutes les pages.
Déposez ceci:
Pensez a cliquer sur le bouton Valider
Vous pouvez changer le texte de chacun ici entre les guillemets:
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:
Pensez à valider les modifications en cliquant sur le bouton Valider
Vous pouvez aussi changer les icônes avec ce style:
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 .
Les aperçus imagés:
Insertion d'un Smiley en mode html (texte)
Insertion d'un Smiley en mode Wysiwyg
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;
}
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:
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;}
- InvitéInvité
Merci Phil, très pratique
- InvitéInvité
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
Sujets similaires
» [TOUTES VERSIONS] Afficher un texte dactylographié
» [TOUTES VERSIONS] Afficher un texte qui au clic postera un message automatiquement
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
» [TOUTES VERSIONS] Afficher un texte qui au clic postera un message automatiquement
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum