[TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition

Milouze14 Mar 23 Aoû 2016 - 19:49

Hello les ami(e)s,

sur le F.D.F on demande souvent de mettre un texte sur l'éditeur seulement l'iframe (le mode WYSIWYG) est pratiquement inaccessible pour des modifications.

On va donc définir un texte dans le script dans une variable afin d'éviter le soucis de caractères accentués.

De plus, au survol de l'éditeur le texte disparaitra pour laisser place à l'éditeur.

L'aperçu imagé:




Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.

Déposez ceci:

Code:



$(function(){$(function(){
var text='Ne postez pas d\'insulte, évitez les majuscules, faites une recherche avant de poster pour voir si la question n\'a pas été évoqué.';
$('.sceditor-container iframe').before('<textarea id="M14_textarea"placeholder="'+text+'"></textarea>');
})});
$(function(){$(function(){
$('.sceditor-container').mouseenter(function(){
$('#M14_textarea').slideUp();});
$('.sceditor-container').mouseleave(function() {
$('#M14_textarea').slideDown();
});})});





Pensez a cliquer sur le bouton

Puis on va positionner le textarea :

Code:


#M14_textarea
{
position:absolute;
left:2%;
width:96% !important;
height: auto !important;
color: red !important;
font-size:12px;
font-style:italic;

}




Les styles suivants peuvent être modifiés

Code:


color: red !important;
font-size:12px;
font-style:italic;



Le texte modifiable pourra s'effectuer ici:

Code:


var text='Ne postez pas d\'insulte, évitez les majuscules, faites une recherche avant de poster pour voir si la question n\'a pas été évoqué.';


Attention toutefois aux apostrophes et accents , il devront être précédés d'une barre oblique (antislash):

Ezio Ven 26 Aoû 2016 - 17:04

Psychotic Bitch Jeu 1 Sep 2016 - 10:43

Invité Ven 7 Oct 2016 - 11:15

SuperSpaceCab Ven 7 Oct 2016 - 15:00

dragon594 Ven 7 Oct 2016 - 19:09

Invité Mar 11 Oct 2016 - 9:18

Psychotic Bitch Sam 22 Oct 2016 - 1:58

Queen G. Sam 29 Oct 2016 - 20:51

Louaque Jeu 24 Nov 2016 - 16:20

Tony L Lun 9 Jan 2017 - 22:03

issam89 Mar 10 Jan 2017 - 23:52

LMRP Mer 8 Mar 2017 - 20:52

msfeettoes Sam 15 Avr 2017 - 16:44

petitefeuille Mar 13 Mar 2018 - 15:45

Ombi Lun 19 Mar 2018 - 9:24

chrisnvidia Dim 13 Mai 2018 - 20:50

Lilas Mer 21 Nov 2018 - 19:05

Mi Neth Ven 17 Jan 2020 - 17:22

Milouze14 Ven 17 Jan 2020 - 18:41

Splash Ven 17 Jan 2020 - 20:39

Milouze14 Sam 18 Jan 2020 - 5:03

De rien Splash,
L'entraide est fait pour cela .

soleda Lun 20 Jan 2020 - 16:00

tritri Sam 25 Avr 2020 - 21:03

Constellation Mer 31 Mar 2021 - 1:14

Merci pour ce tuto très utile

Contenu sponsorisé