Créer un aperçus dynamique instantannée

Bonjour à tous,

Je ne sais pas si je suis dans la bonne section, car je ne sais pas quel language utiliser.

Voilà je voudrais créé un système d'aperçus dynamique instantanné, lorsque les membres écrive soit un MP, soit post sur un forum, et autres...
Le membre écri donc son texte dans un textarea, avec du bbcode, et en dessous dans un autre "textarea" ou zone "disabled" voir l'aperçus instantanné et dynamqiue avec le bbcode qui est donc remplacer par ce quoi il doit être.
Ainsi, une balise Bonjour[/bold], apparaitra immédiatement en dessous en gras.

Merci d'avance

pour ça tu as trois solutions, soit tu fais un évênement javascript qui a chaque touche simule l'affichage (mais ne correspond pas exactement a ce que peut produire le serveur). soit tu réalise un bouton actualiser avec de l'ajax qui envoi le traitement au serveur.
ou soit tu fais comme pour ce forum tu envois le tout par formulaire et il te renvois la prévisualisation. Je te conseille cette dernière méthode. Plus simple, plus maintenable, plus efficace et surtout plus accessible...

Merci pour ta réponse

Pour l'ajax je connaissais déjà la mathode et y est déjà penser, comme pour le renvoi de visulisation.

Mais je veux vraiment quelque chose de poussé, et instantanné, ce qui évitera aussi un excès de ressources serveur.

Avec du Xml se serait possible ?
J'ai déjà vu se système sur plusieurs site, c'est vraiment pas mal.

Si c'est de l'instantané, ça sera du Javascript.
XML n'est pas un langage de programmation, mais de stockage de données (comme HTML, d'ailleurs). Les langages de script interprétés côté serveur sont les mieux adaptés à ce genre de traitement (parser du BBcode et produire un code HTML qui va bien), mais sont interprétés côté serveur, et demandent donc un échange avec le serveur : soit un rechargement complet de la page, soit quelque chose de plus discret en Ajax (avec envoi périodique automatique ou action de l'utilisateur). Dans tous les cas, du moment où il y a échange avec le serveur, ça ne peut pas être instantané.

Le seul langage qui s'exécute côté client, c'est Javascript (ou ActionScript pour Flash, ou Java...). Par contre, écrire un parser BBcode en Javascript ne sera peut-être pas une mince affaire. À voir.

Salut,

mpop a écrit :
XML n'est pas un langage de programmation, mais de stockage de données (comme HTML, d'ailleurs).

oulah ! Tu vas en facher plus d'un là...
XML est un meta-langage qui peut servir à fabriquer d'autres langages. Il sert uniquement à décrire les données et non à les stocker. Pour cela, il y a les bases de données relationnelles ou mieux, les bases XML comme Xindice par exemple adaptées à la conservation des données XML (requêtes XQuery possibles)

HTML est à la fois un langage de description et de mise en forme... (minimale ! )

En PHP, tu peux obtenir une prévisualisation assez rapide si ton code est correctement optimisé... Je ne vois pas vraiment l'intérêt de le remplacer par JS ou Ajax étant donné que certains visiteurs n'y auront plus accès. A la rigueur, en surcouche, oui, si tu veux pour glaner quelques ressources mais je ne pense pas non plus que tu vas avoir 12000 visiteurs qui vont demander une prévisualisation en même temps donc, quelquepart, la charge serveur est vraiment négligeable comparée au service rendu... Le fait de le faire en PHP est bien plus judicieux, au moins dans un premier temps, mais aussi plus simple à faire...

koala64 a écrit :
oulah ! Tu vas en facher plus d'un là...
XML est un meta-langage qui peut servir à fabriquer d'autres langages. Il sert uniquement à décrire les données et non à les stocker. Pour cela, il y a les bases de données relationnelles ou mieux, les bases XML comme Xindice par exemple adaptées à la conservation des données XML (requêtes XQuery possibles)

En fait j'ai cherché le mot juste, et je n'ai pas eu l'inspiration sur le moment, alors je me suis contenté de « stockage ». Mais le mot important était « données ».

J'ai trouver un script que j'ai adapter :

<script type="text/javascript">
function Remplacer(chaine, replaceby, texte)
{
                for (i=0; i<texte.length; i++)
       {
                texte = texte.replace(chaine, replaceby);
        }
        return texte;
}
function apercu(texte)
{
        texte = Remplacer('&','&amp;', texte);
        texte = Remplacer('<','&lt;', texte);
        texte = Remplacer('>','&gt;', texte);
        texte = Remplacer('\n', '<br />', texte);
        texte = Remplacer('[gras]', '<bold>', texte);
        texte = Remplacer('[/gras]', '</bold>', texte);
        texte = Remplacer('[i]', '<i>', texte);
        texte = Remplacer('[/i]', '</i>', texte);
        texte = Remplacer('[s]', '<u>', texte);
        texte = Remplacer('[/s]', '</u>', texte);
        texte = Remplacer('[p]', '<p>', texte);
        texte = Remplacer('[/p]', '</p>', texte);
        texte = Remplacer('[position=centre]','<div align="center">', texte);
        texte = Remplacer('[/position]','</div>', texte);
        texte = Remplacer('[gauche]','<div align="left">', texte);
        texte = Remplacer('[/gauche]','</div>', texte);
        texte = Remplacer('[droite]','<div align="right">', texte);
        texte = Remplacer('[/droite]','</div>', texte);
        texte = Remplacer('[img]','<img src="', texte);
        texte = Remplacer('[/img]','" alt="Image" />', texte);
/*Intégration de la chaine de caractère */
        document.getElementById('apercu').innerHTML = texte;
}
</script>

L'écriture instantanné se fais bien mais par exemple
Quand je tappe dans le textearea :" [/gras]
Il devrai remplacer par une balise <bold></bold>
Apparemment le replacement se fait, mais rien n'est écris en gras...

harddream a écrit :
L'écriture instantanné se fais bien mais par exemple
Quand je tappe dans le textearea :" [/gras]
Il devrai remplacer par une balise <bold></bold>
Apparemment le replacement se fait, mais rien n'est écris en gras...

Une petite révision sur le HTML de base ? L'élément bold n'existe pas, au contraire de b (caractères gras) et de strong (emphase forte).

Oui dsl j'ai vu ça et j'avais déja corriger l'erreur dans mon code
Bold pas bien ^^
Quelle balise je px mettre pour faire centré un texte (je parle bien de l'aperçus)?

harddream a écrit :
Quelle balise je px mettre pour faire centré un texte (je parle bien de l'aperçus)?

Attribut CSS : text-align: center.
En HTML dans l'aperçu : <p style="text-align: center;">...</p>.

OK ça marche
Je pense avoir preque trouver ce que je voulais, le script à l'air de bien fonctionner, un peux la galère avec les <span> et les <table><td> et autre, car j'ai toujours eu l'habitude de coder en Xhtml et des CSS.

Petit problème par contre, si j'utilise un textarea pour afficher l'aperçus, le code ne réagit pas mais le texte s'affiche.. Si j'utilise un <div> celà fonctionne.
Mais le textarea à l'avantage d'utiliser un ascenseur au fur et a mesure que le texte grandit, pour ça que je l'utilise
Y a-til une solution ?
Modifié par harddream (19 Dec 2006 - 18:25)

harddream a écrit :
Petit problème par contre, si j'utilise un textarea pour afficher l'aperçus, le code ne réagit pas mais le texte s'affiche.. Si j'utilise un <div> celà fonctionne.

C'est à dire ? Que se passe-t-il exactement avec un textarea ?
Il me semble que récupérer le contenu d'un simple bloc (div) et récupérer le contenu d'un élément de formulaire sont deux actions distinctes en javascript. Le script utilisé est-il prévu pour des éléments de formulaires ? Si ça n'est pas le cas, il faudra peut-être l'adapter.

harddream a écrit :
Mais le textarea à l'avantage d'utiliser un ascenseur au fur et a mesure que le texte grandit, pour ça que je l'utilise

Le textarea a surtout l'avantage d'être accessible (si le reste du formulaire est correct, bien sûr).

Et bien en fait, dans le textarea où l'on tappe le message, lorsque je met une balise Bonjour[/gras], au lieu que le html apparaisse dans le textarea de l'aperçus qui devrai donc afficher "Bonjour" en gras, m'affiche les balises html...
<strong>Bonjour</strong>
Donc aucun interrêt...
Pour le script je ne pourrais pas trop dire mais de toute évidence non.
Modifié par harddream (20 Dec 2006 - 10:39)

Je pense que c'est normal, un textarea n'interprète pas les balises HTML.
Il considère la chaîne de caractères que tu lui donnes comme... une chaîne de caractères et non comme du code HTML

Ce que tu peux faire, c'est une div avec une hauteur fixée (en em par exemple) et avec un overflow: auto; dans ta CSS.

Ah, comme la largeur de l'aperçu devra être fixe et sans scroll (je suppose), il faut que tu spécifies que tu veux un scroll vertical seulement.

Ca donnerait :

HTML :

<div id="apercu">
</div>

CSS :

#apercu
{
height: 7em;
width: 10em; 
overflow-y: auto;
}

Attention, je n'ai rien testé, mais ça devrait et donner une bonne piste

Merci daitheflu, et merci tout le monde, je pense que ça devrais marcher, et puis ça correpond parfaitement à ce que je voulais, c'est finalement mieux qu'un textarea, mais j'avais zappé la propriété overflow !

Je vous tien au courant