Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

[JS] Prévisualisation en directe

Tutorial de Under-Warz

21 octobre 2006 à 22:10:53

Bonsoir,

J'ai utilisé le tutorial de Under-Warz afin de faire une prévisualisation en directe (mais je ne l'ai pas fait pour faire un bbcode).
Mon script marche très bien, seulement dans le cas où j'essaie d'afficher une image dans le cadre de la visualisation...
En effet, lorsque j'affiche une image, la page cherche des données indéfiniment... Voici le code :

var timer=0;
var ptag=String.fromCharCode(5,6,7);
function previsualisation() {
t=document.formulaire.message.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev_reponse").innerHTML=t
if (document.formulaire.chkb_prev_reponse.checked) timer=setTimeout(previsualisation,1)

}
function code_to_html(t) {
t=nl2khol(t)
// balise Gras 
t=deblaie(/(<\/gras\>)/g,t)
t=remplace_tag(/<gras>(.+)<\/gras>/g,'<span style="font-weight: bold;">$1</span>',t)
t=remblaie(t)

// balise Italique
t=deblaie(/(<\/italique>)/g,t)
t=remplace_tag(/<italique>(.+)<\/italique>/g,'<span style="font-style: italic;">$1</span>',t)
t=remblaie(t)

// balise Souligné
t=deblaie(/(<\/souligné>)/g,t)
t=remplace_tag(/<souligné>(.+)<\/souligné>/g,'<span style="text-decoration:underline;">$1</span>',t)
t=remblaie(t)

// balise Barré
t=deblaie(/(<\/barré>)/g,t)
t=remplace_tag(/<barré>(.+)<\/barré>/g,'<span style="text-decoration:line-through;">$1</span>',t)
t=remblaie(t)

// balise Image
t=deblaie(/(\<\/image\>)/g,t)
t=remplace_tag(/\<image\>(.+)\<\/image\>/g,'<img src="$1" />',t)
t=remblaie(t)

// balise Lien 1
t=deblaie(/(<\/url\>)/g,t)
t=remplace_tag(/<\lien>http:\/\/(.+)<\/lien>/g,'<a href="$1">http://$1</a>',t)
t=remblaie(t)

// balise Lien 2
t=deblaie(/(<\/url\>)/g,t)
t=remplace_tag(/<\lien:([\s\S]*?)>(.+)<\/lien>/g,'<a href="$1">$2</a>',t)
t=remblaie(t)

// balise Citation 1
t=deblaie(/(<\/quote>)/g,t)
t=remplace_tag(/<quote>(.+)<\/quote>/g,'<div style="background:white; border:1px solid #85b4e1; padding:2px; margin:10px;"><span style="display:block; font-size:10px; font-weight:bold; margin-bottom:5px; padding-bottom:2px; border-bottom:1px solid #85b4e1;">Citation :</span>$1</div>',t)
t=remblaie(t)

// balise Citation 2
t=deblaie(/(<\/quote>)/g,t)
t=remplace_tag(/<quote:([\s\S]*?)>(.+)<\/quote>/g,'<div style="background:white; border:1px solid #85b4e1; padding:2px; margin:10px;"><span style="display:block; font-size:10px; font-weight:bold; margin-bottom:5px; padding-bottom:2px; border-bottom:1px solid #85b4e1;">Citation : $1</span>$2</div>',t)
t=remblaie(t)

// smileys
t=remplace_tag(/:D:/,'<img src="styles/images/smileys/biggrin.gif" alt=":D" />',t)
t=remblaie(t)
t=unkhol(t)
t=nl2br(t)
return t
}

function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}

Ce sont donc les lignes en-dessous des commentaires // balise image et // smiley qui fonctionnent mal...

Merci d'avance pour votre aide

22 octobre 2006 à 1:23:43

essaye ca:

var timer=0;
var ptag=String.fromCharCode(5,6,7);
function previsualisation() {
t=document.formulaire.message.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev_reponse").innerHTML=t
if (document.formulaire.chkb_prev_reponse.checked) timer=setTimeout(previsualisation,1)
// le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s)
}
function code_to_html(t) {
t=nl2khol(t)
// balise Gras on lui dis que telles balises correspondent à tels codes en HTML
t=deblaie(/(<\/gras\>)/g,t)
t=remplace_tag(/<gras>(.+)<\/gras>/g,'<span style="font-weight: bold;">$1</span>',t)
t=remblaie(t)

// balise Italique
t=deblaie(/(<\/italique>)/g,t)
t=remplace_tag(/<italique>(.+)<\/italique>/g,'<span style="font-style: italic;">$1</span>',t)
t=remblaie(t)

// balise Souligné
t=deblaie(/(<\/souligné>)/g,t)
t=remplace_tag(/<souligné>(.+)<\/souligné>/g,'<span style="text-decoration:underline;">$1</span>',t)
t=remblaie(t)

// balise Barré
t=deblaie(/(<\/barré>)/g,t)
t=remplace_tag(/<barré>(.+)<\/barré>/g,'<span style="text-decoration:line-through;">$1</span>',t)
t=remblaie(t)

// balise Image
t=deblaie(/(\<\/image\>)/g,t)
t=remplace_tag(/\<image\>(.+)\<\/image\>/g,'<img src="$1" />',t)
t=remblaie(t)

// balise Lien 1
t=deblaie(/(<\/url\>)/g,t)
t=remplace_tag(/<\lien>http:\/\/(.+)<\/lien>/g,'<a href="$1">http://$1</a>',t)
t=remblaie(t)

// balise Lien 2
t=deblaie(/(<\/url\>)/g,t)
t=remplace_tag(/<\lien:([\s\S]*?)>(.+)<\/lien>/g,'<a href="$1">$2</a>',t)
t=remblaie(t)

// balise Citation 1
t=deblaie(/(<\/quote>)/g,t)
t=remplace_tag(/<quote>(.+)<\/quote>/g,'<div style="background:white; border:1px solid #85b4e1; padding:2px; margin:10px;"><span style="display:block; font-size:10px; font-weight:bold; margin-bottom:5px; padding-bottom:2px; border-bottom:1px solid #85b4e1;">Citation :</span>$1</div>',t)
t=remblaie(t)

// balise Citation 2
t=deblaie(/(<\/quote>)/g,t)
t=remplace_tag(/<quote:([\s\S]*?)>(.+)<\/quote>/g,'<div style="background:white; border:1px solid #85b4e1; padding:2px; margin:10px;"><span style="display:block; font-size:10px; font-weight:bold; margin-bottom:5px; padding-bottom:2px; border-bottom:1px solid #85b4e1;">Citation : $1</span>$2</div>',t)
t=remblaie(t)

// smileys
t=remplace_tag(/:D:/,'<img src="styles/images/smileys/biggrin.gif" alt=":D" />',t)
t=remblaie(t)
t=unkhol(t)
t=nl2br(t)
return t
}
//tout le code qui suit c'est pour transformer toutes les balises, comme les
//reg_replace en PHP
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}

j'ai pas encore essayer :euh:

:euh:

22 octobre 2006 à 8:51:07

Ca serait 1.000 fois plus simple de le faire en ajax... Pourquoi ce casser la tête rien qu'avec du JavaScript? o_O

o_O

!

Le tuto sur l'ajax sur ce site, c'est justement ce que tu veux faire

... Miracle

!

Cordialement,
CoxTheKing.

22 octobre 2006 à 20:32:18

ybouane > Malheureusement ça ne marche pas...

coxtheking > Parce qu'avant d'étudier ajax, j'aimerais maitriser JavaScript, et je sais que rien n'est plus efficace que la pratique...

Aussi, je profite de ce topic pour signaler que j'ai maintenant deux pages auxquels ce script devraient s'appliquer. J'ai modifier ma fonction previsualisation() :

function Ident(Obj)
{
return (document.all)?document.all[Obj]:document.getElementById(Obj);
}

var timer=0;
var ptag=String.fromCharCode(5,6,7);
function previsualisation(variable) {
t=document.formulaire.message.value
t=code_to_html(t)
var mavariable = Ident(variable)
var monautrevariable = "document.formulaire.chkb_" + variable
if (mavariable) mavariable.innerHTML=t
if (monautrevariable.checked) timer=setTimeout(previsualisation(variable),1)
}

Ca marche, seulement ce n'est plus en direct, je dois cliquer et recliquer sur la croix pour que mon cadre s'actualise...

Merci d'avance

22 octobre 2006 à 20:40:20

je pense(je suis pas un pro mais) que tu doit faire ca:

<body onload="javascript:nom_de_ta_fonction();">
</body>

22 octobre 2006 à 21:01:14

bah dans ce cas non, niveau xHTML ça donne ça :

<textarea name="message" rows="15" cols="70"></textarea><br />
<input type="checkbox" id="chkb_prev_ajout_topic" onClick="previsualisation('prev_ajout_topic');" />Prévisualisation automatique
<div id="prev_ajout_topic" style="display:none;"></div>

Anonyme

23 octobre 2006 à 1:24:05

onclick, pas onClick
je pinaille mais tu parlais de xhtml, bah ton code est pas bon a cause de ca

23 octobre 2006 à 19:57:55

Ouais mais ça change rien mis à part pour la validité

[JS] Prévisualisation en directe

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.