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)
![[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 1189](https://i.servimg.com/u/f87/11/26/21/37/1189.png)
Insertion d'un Smiley en mode Wysiwyg
![[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 254](https://i.servimg.com/u/f87/11/26/21/37/254.png)
![[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte Editeur](https://www.milouze14.fr/editeur.gif)
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:
Dernière édition par Milouze14 le Lun 29 Nov 2021 - 16:34, édité 9 fois
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)
![[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 1189](https://servimg.com/r/8711262137/1189.png)
Insertion d'un Smiley en mode Wysiwyg
![[TOUTES VERSIONS]Afficher au dessus de l'éditeur l'information si mode Wysiwyg ou texte 254](https://servimg.com/r/8711262137/254.png)
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
.