Partage

La prévisualisation du zForm

1 2 >>

Sujet résolu

Anonyme

27 novembre 2005 à 8:22:53

Bonjour, je me présente, Dark Kirua, je suis un nouveau sur les forums mais pas sur le site!
Je tiens tout d'abord à remercier les créateurs pour cette superbe v3 :-°

Ma question concerne ce petit message qui s'affiche en ce moment sous mon textarea!
En effet, j'aimerais faire quelque chose de similaire mais avec du HTML! En fait, c'est pour un système de news personnalisé donc c'est moi qui vais l'écrire donc je pense pas que j'irais ppiquer mes mots de passes lol!
Comme je suis pas super bon en javascript, j'aurais voulu savoir comment j'aurais pu faire! Je pense que c'est assez simple avec une fonction en head et un petit onchange (sans majuscules sinon pas valide xhtml 1.1 lol) et c'est tout mais je sais pas faire!
Merci d'avance à tous.

Dark Kirua

Didjor

27 novembre 2005 à 10:17:59

Euh, l'aperçu en temps réel, je pense pas que ça soit facile.

Je suis pas sûr, mais deux amis Infos à moi m'ont parlé d'une méthode assez puissante, l'AJAX, qui fait de la pure interaction PHP/JS, et ça ne m'étonnerait pas que ça soit ça.

Donc, si tu ne t'y connais pas en JavaScript, je te conseille d'oublier cette fonction, je pense qu'il faut laisser ça aux confirmés.

iglopx

27 novembre 2005 à 10:47:48

C'est pas si compliqué que ca à prendre en main l'ajax...

Avec cette classe par exemple : http://xhrconnection.sutekidane.net/

a+

targuan

27 novembre 2005 à 11:38:38

Salut

Je ne pense pas qu'il soit utile d'utiliser AJAX dans ce cas là:
il suffit d'utiliser la propriétée innerHTML du javascript (d'ailleur, si AJAX était utiliser, le code suivant serait aussi parser dans l'aperçu, ce ui n'est pas le cas.), un petit exemple rapide:

après, on peut utiliser des replace pour la mise en forme...

Savageman

27 novembre 2005 à 11:56:37

L'apercu ne parse pas tout, d'ou l'interet

Sinon en regardant les sources, on voit que c'est fait par javascript... Et non AJAX!
PHP est derrière une fois que tu as posté ton message (pour l'apercu final), mais pas pour l'apercu en temps réel... (t'imagine la charge serveur aussi, soi a chaque fois que tu tapes une lettre, tout ton message est envoyé? Vous êtes fous les gens!!!!)

MailClark: your team’s bot for external communications : send and receive emails, Twitter & Facebook messages without leaving Slack ❤️

Didjor

27 novembre 2005 à 12:25:08

Perso, je connais pas du tout AJAX, j'en ai juste entendu parler.
[ Fumo ! ]
[ Désolé, je me sentais obligé :euh:

]

Totoj21

27 novembre 2005 à 20:36:50

Salut
je pense que ça va t'intéressé, y a moyen de visualiser (du bbcode et du html) avec du javascript ! pour ça j'ai trouvé un script bien sympa sur EditeurJavascript.com

Amusez vous bien !!!

Anonyme

27 novembre 2005 à 21:12:38

je vous remercie tous pour vos réponses!
Le truc, c'est que moi je n'ai ni bbcode, ni smileys, ni lien qui change le texte (cad la police la taille etc) je veux juste afficher mo code html dans mon textarea et qu'il s'affiche en dessous!
a+
Dark Kirua

maxmaxmax12

27 novembre 2005 à 22:10:30

Concernant les langages utilisés sur le SdZ, tout est expliqué ici.

Pour résumer :

# Aperçu en temps réel ==> JS ;
# Aperçu final ==> AJAX.

Gamer_man

28 novembre 2005 à 2:05:49

LOL, si l'apercu était fait en AJAX, il faudrait au moins 20 Barts...

C'est du JavaScript

Bisous

Anonyme

28 novembre 2005 à 16:48:26

Vive la Team J21 >> je ne trouve pas le script en question

A tous, je suis au courant que c'est du Javascript mais je sais pas comment faire!
Merci a tous!
Dark Kirua

Totoj21

28 novembre 2005 à 20:13:59

ben pourtant mon lien il marche bien !! o_O

Bon ben je vais le mettre ici sachant que ça vient de editeurjavascript.com

A insérer entre <head> et </head> :

Entre <body> et </body> :

<form name="formu">
Entrez un texte :<br />
<textarea name="texte" id="texte"></textarea><br />
<input type="button" value="Prévisualiser" onClick="visualisation()">
<input name="auto" type="checkbox" onClick="automatique()"> Auto
</form>
<span id="previsualisation"> </span>

Dans un fichier nommé checkbb.js placé dans le même repertoire que la page "rediger.php" :

// JavaScript Auteur: http://tofem.net/ressources
var timer=0;
var ptag=String.fromCharCode(5,6,7);
function visualisation() {
t=document.formu.texte.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("previsualisation").innerHTML=t
if (document.formu.auto.checked) timer=setTimeout(visualisation,1000)
}
function automatique() {
if (document.formu.auto.checked) visualisation()
}
function code_to_html(t) {
t=nl2khol(t)
// balise Gras
t=deblaie(/(\[\/b\])/g,t)
t=remplace_tag(/\[b\](.+)\[\/b\]/g,'<b>$1</b>',t)
t=remblaie(t)
// balise Italique
t=deblaie(/(\[\/i\])/g,t)
t=remplace_tag(/\[i\](.+)\[\/i\]/g,'<i>$1</i>',t)
t=remblaie(t)
// balise Underline
t=deblaie(/(\[\/u\])/g,t)
t=remplace_tag(/\[u\](.+)\[\/u\]/g,'<u>$1</u>',t)
t=remblaie(t)
// balise Img
t=deblaie(/(\[\/img\])/g,t)
t=remplace_tag(/\[img\](.+)\[\/img\]/g,'<img src="$1"/>',t)
t=remblaie(t)
// balise URL
t=deblaie(/(\[\/url\])/g,t)
t=remplace_tag(/\[url=([^\s<>]+)\](.+)\[\/url\]/g,'<a href="$1" target="_blank">$2</a>',t)
t=remblaie(t)
// balise Color
t=deblaie(/(\[\/color\])/g,t)
t=remplace_tag(/\[color=(#[a-fA-F0-9]{6})\](.+)\[\/color\]/g,'<font color="$1">$2</font>',t)
t=remblaie(t)
}
function deblaie(reg,t) {
texte=new String(t);
return texte.replace(reg,'$1\n');
}
function remblaie(t) {
texte=new String(t);
return texte.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
texte=new String(t);
return texte.replace(reg,rep);
}
function nl2br(t) {
texte=new String(t);
return texte.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
texte=new String(t);
return texte.replace(/\n/g,ptag);
}
function unkhol(t) {
texte=new String(t);
return texte.replace(new RegExp(ptag,'g'),'\n');
}

Si jamais t'as des questions n'hésite pas je comprends pas tout le code mais une bonne partie

Normalement vous pouvez tester le code sur cette page ou encore ici

jeremdu06

28 novembre 2005 à 21:00:01

salut !
J'ai le meme probleme que toi (enfin presque) j'aurai besoin de quelqu'un pour m'aider c'est ici que ça se passe >>>Prévisualisation en "live"
Merci
cordialement,

Anonyme

28 novembre 2005 à 21:56:39

merci a toi, vive la team j21! tu as copié un code qui utilises le bbcode, je m'en servirais surement pour faire mon forum car j'ai pas envie de le refaire à zéro mais la je cherchais un code qui me faisait le tout en html, c'est a dire sans regex sans rien, juste que quand j'écris <a href=...> il me met un lien meme si c'est un lien qui va me pourir le site :lol:

donc voila ma qestion: est-ce que c'est possible "d'épurer le code" pour qu'il ne marche pas avec le bb (et c'est-a-dire sans fichier .js quoi au final!)
Merci d'avance!
Dark Kirua

Totoj21

28 novembre 2005 à 22:12:08

a mon avis c'est faisable assez facilement
tout d'abord dans le fichier .j21 euh .js tu enlève tout ce qu'il y a apres la fonction

function code_to_html(t)

cette fonction y compris

ensuite le morceau de code qu'il te reste tu le met enter tes balises <head>
(du coup tu vires le morceau de code qui appelait le fichier en .js

et je pense que ça devrait le faire sinon ben j'essayerai pour voir !

(il n'y a qu'en essayant qu'on trouve nan !)

targuan

28 novembre 2005 à 23:18:29

Citation : Dark Kirua

merci a toi, vive la team j21! tu as copié un code qui utilises le bbcode, je m'en servirais surement pour faire mon forum car j'ai pas envie de le refaire à zéro mais la je cherchais un code qui me faisait le tout en html, c'est a dire sans regex sans rien, juste que quand j'écris <a href=...> il me met un lien meme si c'est un lien qui va me pourir le site
donc voila ma qestion: est-ce que c'est possible "d'épurer le code" pour qu'il ne marche pas avec le bb (et c'est-a-dire sans fichier .js quoi au final!)
Merci d'avance!
Dark Kirua

le code de mon précendent post ne te convient pas? Il répond pourtant exactement à ce besoin...

Anonyme

29 novembre 2005 à 8:21:15

dsl targuan mais j'ai pas compris comment il réagis et comment on l'utilise ton code :euh:

c'est quoi cette propriété innerHTML? et ça veut dire quoi parser? pardonner mon inculture en javascript mais moi je suis surtout PHP :euh:

a+
Dark Kirua

targuan

29 novembre 2005 à 14:20:24

innerHTML, c'est ce qui permet d'avoir accés au contenu d'une balise (un <div></div> par exemple) et donc de modifier le contenu de ce <div></div>.
Dans l'exemple

il y a deux parties: un textarea et un div.
Dans le textarea, j'ai mit une instruction onkeyup (c'est a dire quand une touche est relachée) qui va changer le contenu du div (c'est à dire document.getElementById('a1').innerHTML) par le contenu du textarea ( c'est à dire document.getElementById('a2').value ).

En gros, à chaque fois que tu appuyes sur une touche, le contenu du div est replacer par le contenu du textarea.

Anonyme

29 novembre 2005 à 16:34:29

bon je suis en bonne voie:
- avec le onkeyup, le script marche uniquement quand je relache une touche du clavier.
- avec le onmousemove, le script marche si on fait un copier coller avec le clic droit DANS le textarea.
- avec le onmouseout, le script marche si on fait un clic droit dans le textarea, mais que le mot coller se trouve HORS du textarea (c'est subtil quoi lol).
Et donc actuellement le code est compètement opérationnel (je ne pense plus avoir laissé de place au hasard mais si quelqu'un voit un truc qu'il me fasse sign) CEPENDANT voila le code semi-final et tout le monde comprendra ma denière question:

je pense que c'est clair : comment réduire le code? (pour ne pas répeter les instructions genre comme en php onmouseover OR onkeyup OR onmouseout quoi)
si je suis pas assez explicite faites signe!!!
a+
Dark Kirua

PS: je me rends compte que dans leur prévisualisation en temps réel <code> ne marche pas!

Anonyme

30 novembre 2005 à 19:37:26

Bon mon code a pas mal évolué et je lui ai rajouté la gestion des /n, et lpeins d'autres trucs je vous laisse admirer la version finale:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Apercu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var timer=0;
var ptag=String.fromCharCode(5,6,7);
function visualisation()
{
t=document.forms[0].titre.value
if (document.getElementById) document.getElementById("apercu_titre").innerHTML=t

c=document.forms[0].contenu.value
c=nl2br(c)
if (document.getElementById) document.getElementById("apercu_contenu").innerHTML=c

if (document.forms[0].auto.checked) timer=setTimeout(visualisation,50)
}
function cacher()
{
tabler = document.getElementById('apercu');
if (document.forms[0].auto.checked)
{
tabler.style.display="";
}
else
{
tabler.style.display="none";
}
}
function automatique()
{
if (document.forms[0].auto.checked) visualisation()
else cacher()
}
function nl2br(c)
{
texte=new String(c);
return texte.replace(/\n/g,'<br />');
}
</script>
</head>
<body onload="automatique()">
<form action="">
<p>Titre :<br />
<input type="text" size="50" name="titre" id="titre" value="Titre" />
</p>
<p>Contenu :<br />
<textarea name="contenu" id="contenu" cols="50" rows="10">
<b>Texte en gras</b>
<i>Texte en italique</i>
<u>Texte souligné</u>
<a href="http://www.tapasditschulss.free.fr">Lien</a>
<img src="http://www.google.fr/images/logo_sm.gif" alt="" /></textarea><br />
<input name="auto" type="checkbox" checked="checked" onclick="automatique();cacher()" />
Aperçu en temps réel
</p>
</form>
<table id="apercu" style="align: center;border-collapse: collapse;border: 1px solid black;margin: auto;">
<tr>
<th id="apercu_titre" style="border:1px solid black;text-align: center;background-color: black;color: white;font-family: Comic Sans MS, serif;"></th>
</tr>
<tr>
<td id="apercu_contenu" style="border:1px solid black;"></td>
</tr>
</table>

</body>
</html>

je vous conseille de l'essayer et si vous trouvez des choses à rajouter, n'hésitez pas!
a+

Dark Kirua

devock

30 novembre 2005 à 21:22:08

D'abord merci pour le code et je voudrais savoir d'abord sa marche pas pour l'affichage en temps réel même quand on coche la case (pourtant j'ai bien recopié) et je voudrais savoir quoi rajoutter comme code si je veut par exemple dans la prévisualisation un truc du genre :lol:

par un truc du genre <img src="lol.png" /> ?????

Merci d'avance pour vos réponse

Déployez votre site avec WordPress // CHATEAU AH AH AH AH AH AH AH

Anonyme

30 novembre 2005 à 22:07:55

Pour ta première question, plusieurs personnes me l'ont fait remarquer, mais c'est par ce que IE avec SP2 bloque le javascript en local (mais tu peux le désactiver)
vas le tester sur www1.covers.free.fr/test.html tu verras il marche correctement!
et pour ta 2eme question, tou se fait en html donc si tu veux mettre ton image lol.png, il faut mettre le code correspondant! avec bien sur le bon chemin sinon sa rique que planter!
par contre je me suis apercu d'un petit bug en fait sur la zform lactualisation de la prévisu se fait par onkeyup et onclick alors que moi je l'ai fait avec des temps (sa évite nottament le problème du copier coller) le problème c'est que sur les pages chargées quand la souris passe sur un lien quelconque ou la textarea ca clicnote selon le temps (visualisation,50) donc ici, toutes les 50ms donc je préconise de mettre 500ms sinon ça déconne vraiment!
Je cherche un moyen d'arranger sa

devock

1 décembre 2005 à 19:05:21

bah le truc c'est que je suis pas sous IE je suis sous Firefox :euh:

Déployez votre site avec WordPress // CHATEAU AH AH AH AH AH AH AH

Anonyme

1 décembre 2005 à 21:00:35

essaie d'aller sur
http://www1.covers.free.fr/test.html
et dis moi si sa marche

devock

2 décembre 2005 à 0:00:59

ouep sa marche

Déployez votre site avec WordPress // CHATEAU AH AH AH AH AH AH AH

gogo

9 décembre 2005 à 14:47:17

Bonjour, merci pour ce topic. Il m'a été bien utile jusqu'à présent à moi aussi

. J'ai juste une question. Si on veut que l'aperçu en direct s'affiche directement. Que le bouton aperçu temps réel soit sélectionné directement. Comment fait-on?

Obust

9 décembre 2005 à 19:57:32

Salut a tous,
moi j'ai un petit probleme c'est avec les bouton qui (normalement lorsqu'on appuie) mettent les fausses balise dans le texte area mais moi ça marche pas.
Si quelqu'un pourai m'aider en m'expliquant en plus comment ça marche, vous me rendriez heureux

legende

9 décembre 2005 à 23:55:13

Dites svp y'aurais pas une fonction javascript pour desactiver le html de fonctionner dans un texte svp ?

Gamer_man

10 décembre 2005 à 3:07:10

Citation : Dark Kirua

<textarea id="a2" cols=45 rows=10
onkeyup="javascript:document.getElementById('a1').innerHTML=document.getElementById('a2').value;"
onmousemove="javascript:document.getElementById('a1').innerHTML=document.getElementById('a2').value;"
onmouseout="javascript:document.getElementById('a1').innerHTML=document.getElementById('a2').value;">
</textarea>
<div id="a1"></div>

je pense que c'est clair : comment réduire le code? (pour ne pas répeter les instructions genre comme en php onmouseover OR onkeyup OR onmouseout quoi)
si je suis pas assez explicite faites signe!!!
a+
Dark Kirua

Bisous

balboulloude

10 décembre 2005 à 13:33:55

Erf Moi je n'y arrive pas, sa me met une miniscule fenetre avec une chekbox mais aucune previsualistaion en temps réel comme sur le sdz ....

Help please

1 2 >>