Ecrire le contenu d'un textarea modifier avec du javascript

19 nov. 2006, 16:13

Ben alors au lieu d'ouvrir un pop-up, tu formate la chaine récupérée exactement comme je te l'ai indiqué et tu l'insères avec innerHTML, le principe est le même.

Je ne connait rien au javascipt, quand je te dit que j'ai des popup c'est que j'ai utiliser un generateur. Je vais bientot enfin dès que j'aurais les temps, me mettre au javascipt mais en atendant je n'ai pas compris ce que tu as dit.
Je pense qu'il faut recuperer le fichier prev.js, modifier l'endroit ou il recupere le texte donc passer du textarea au div puis ecrire dans un autre div.

19 nov. 2006, 17:12

Bon, je t'ai préparé un modèle, à toi d'adapter selon tes besoins. Et sois gentil, ne me mets pas une réponse dans deux minutes en me posant une nouvelle question, tu as avec cet exemple absolument tout ce dont tu as besoin pour avancer. Il te reste pas mal de travail, mais les éléments essentiels à la compréhension sont là :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Saisir et pré-visualiser un message</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
#page {
    position: absolute;
    top: 0;
    left: 50%;
    width: 600px;
    margin-left: -300px;
}
fieldset {
    border: 3px double #cc9;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* Fonction de transformation des bbCodes */
function transBbCodes(txt)
{
    // clin d'oeil
    txt = txt.replace(/;-\)/g,'<img src="./smilies/clin.png" alt="" \/>');
    // sourire
    txt = txt.replace(/:-\)/g,'<img src="./smilies/sourire.png" alt="" \/>');
    // remplacement des retours de chariot par un <br />
    txt = txt.replace(/\n/g,'<br />\n');
    /* Mise en forme HTML */
    txt = '<p>'+ txt +'<\/p>\n';
    return txt;
}
/* Fonction pour pré-visualiser le message dans la page */
function previsualiser()
{
    /* Récupération des données saisies */
    var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Appel de la fonciton pour transformer les bbCodes en balises images */
    var transforme = transBbCodes(msg);
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = transforme;
    
}
/* fonction pour effacer l'aperçu */
function effacer()
{
    document.getElementById('apercu').innerHTML = '';
}
/*]]> */
</script>
</head>
<body>
  <div id="page">
    <h3>Enregistrer un message</h3>
    <form id="saisiemsg" action="#" method="post">
      <fieldset>
        <legend>Saisir le message</legend>
        <p>Pour l'exemple, saisir des messages en inscrivant manuellement quelques bbCodes :</p>
        <ul>
          <li>Sourire : :-)</li>
          <li>Clin d'&oelig;il : ;-)</li>
        </ul>
        <label for="msg">Votre message</label><br />
        <textarea cols="50" rows="10" id="msg" name="msg"></textarea><br />
        <a href="#" onclick="previsualiser(); return false;">Prévisualiser</a> | <a href="#" onclick="effacer(); return false;">Effacer l'aper&ccedil;u</a>
      </fieldset>
    </form>
    <div id="apercu">&nbsp;</div>
  </div>
</body>
</html>

Enregistre ça et ajoute à coté un répertoire [smilies] avec deux images pour remplacer les bbCodes ";-)" et ":-)" nommées respectivement clin.png et sourire.png puis teste le tout.

20 nov. 2006, 13:39

On ne se comprend pas du tout

Je ne veut pas faire un truc de previsualisation ca j'ai deja cela.

Ce que je veut c'est presque identique a ce que tu viens de me poster mise a part que je previsualise pas quelque chose que l'utilisateur ecrit dans un textarea mais quelque chose de fixe dans ma page. Je redonne un exemple.
Si le code de mon titre est cela : [titre principale]Mon super site![/titre principale] je veut qu'il soit transformer automatiquement. Donc ce que tu ma fait etait a peu près ce que je voulai mise a part que je mon texte a transformer n'est pas dans un textarea et que cela le transforme automtiquement et non en pressant un bouton. J'espère que j'ai été clair cette fois.

20 nov. 2006, 13:40

ca doit etre cette ligne :
var msg = document.forms['saisiemsg'].elements['msg'].value;

mais pour que cela le fasse automatiquement je ne sait pas.

20 nov. 2006, 13:57

On ne se comprend pas du tout...

Si je n'ai pas correctement compris ton problème, c'est peut-être bien parce que tu l'as mal formulé. En j'en reviens alors à une idée déjà évoquée il me semble : tu es en train d'essayer de recréer quelque chose qui existe déjà et qui est largement plus avancé : TinyMCE ou FCKEditor qui sont des applications en JavaScript qui vont transformer une zone de saisie (textarea) à la manière d'un MS-Word ou OOo Writer avec la possibilité d'ajouter ou enlever certains outils de modification de texte.

Et si c'est pas encore ça, alors crée un schéma, quelque chose de visuel que je comprenne ce que tu veux exactement.

20 nov. 2006, 14:05

bien compris je cré quelque chose de visuel. Je le post ce soir.

20 nov. 2006, 14:29

http://myfreekits.free.fr/gimp/aide.png

20 nov. 2006, 14:37

Ok, vu, mais du coup, je ne suis pas certain que tu te sois orienté dans la bonne direction.

Soit on fait une pré-visualisation en cours de montage : ok, on passe par le JavaScript et on ouvre un aperçu dans un pop-up par exemple. Soit on affiche la page déjà construite et enregistrée et on fait les transformation en PHP avant envoi au navigateur.

Il faut distinguer d'une part la création/édition d'une page de l'affichage normal d'une page créé et/ou modifiée.

Est-ce que tu saisis le principe ? Si tu reprends le fonctionnement global du livre d'or que je t'ai indiqué, dans la partie administrative, tu peux créer une coloration de l'interface personnalisée : l'aperçu est ouvert dans un pop-up, et tout est fait en JavaScript. Mais une fois que c'est enregistré, l'affichage du LO est géré en PHP.

La création/modification, c'est dans une interface admin : l'affichage normal, c'est dans la partie publique.

20 nov. 2006, 17:37

Oui j'avais vu sur ton livre d'or d'abord j'avais oublié de te faire un remarque c'est que je le trouve très bien. Interfece personnalisable c'est super!

Oui j'avais compris qe le mieu c'est d'afficher grace a du php mais voit tu j'ai un fichier extra long a modifier et pour l'instant, car je doit remettre a un copain ce script très rapidement, je voudrai me contenter de javascript.

j'ai deja vu que cetait possible et c'est un peu la meme chose qu'une previsualisation en directe.

Si tu ne comprend pas dit le moi je te le dessinerait

Donc je disais, dans une previsualisation on a un texte ecrit dans un formulaire et on le transmet par exemple plus bas modifier. Ce que je voudrai faire c'est que par exemple sur le dessin que je t'ai fait, pour l'etape 2 au lieu que le texte soit transformer directe, on l'affiche sans transformer puis en dessous transformer. Donc idem au formulaire sauf qu'on ne peut taper dans un textarea et que ce n'est pas un textarea.

Ensuite grace au css, l'affichage du text non transformer donc au dessus du transformer sera marquer en specifiant par exemple une longeur et une hauteur de 1 px pour une boite.

J'espère avoir été clair. Sinon comme je vous l'ai dit, demander moi un dessin.

20 nov. 2006, 18:02

](*,) Tu es désespérant...

Quand on veut développer de manière efficace, on évite de tout mélanger en général et de mélanger les langages en particulier.

Première étape : définis les différentes données que tu veux pouvoir modifier/ajouter.

Deuxième étape : établis ce que tu veux obtenir et monte ça en HTML, pas de JavaScript, pas de PHP, juste le formulaire et la zone d'aperçu;

Troisième étape : ajoute le JavaScript qui fera le traitement client. À ce stade, on enregistre rien du tout, on teste le fonctionnement du formulaire pour faire afficher ailleurs dans la page le résultat de ce qu'on saisit dans le formulaire.

Tant que tu continueras à tout emmêler, tu n'arriveras qu'à me lasser et on est pas loin du bord. Je crois que tu avanceras surtout beaucoup plus vite quand tu auras toi-même compris le fonctionnement de ce que tu veux faire, j'ai la fugace impression qu'on est loin du compte

20 nov. 2006, 18:27

Je ne comrpend pas ta reaction.Ce que je te demande n'est pas impossible mais different de tes methodes de travail. Alors je te reposte un apercu de ce que je voudrai : je precise tous d'abord que j'ai change rsi tu n'a pas compris enfin rien de mieu qu'un apercu :

Est-ce clair?

20 nov. 2006, 21:07

Est-ce clair?

Non.

Ce que je te demande n'est pas impossible...

Il n'y a pas grand chose d'impossible en programmation. Par contre, la formulation d'un problème est importante, c'est 80% de la solution. On en est encore loin,

Dans tes illustrations, je vois deux pages, pas de formulaire, et aucune note explicative sur les détails des images. Comment espères-tu que quelqu'un comprenne quoi que ce soit ?

Tu mélanges l'interface graphique, le HTML, le JavaScript en une sorte de fouillis assez indescriptible.

Autre point qui aurait tendance à m'agacer un brin, : je viens de voir deux de tes réponses dans le forum "Projets collaboratifs, entraide" : tu n'arrives déjà pas à faire fonctionner ton propre système et tu te proposes déjà d'en aider d'autres. On croit rêver, et j'en suis à me demander si je ne suis pas en train de perdre mon temps.

21 nov. 2006, 13:22

ok je reposte ce soir une image plus clair.

21 nov. 2006, 20:47

http://myfreekits.free.fr/gimp/aide3.png

21 nov. 2006, 22:53

Ok, alors explique moi en quoi le modele de code que je t'ai donné ne convient pas ? À part le fait que tu sembles vouloir un aperçu automatique sans bouton ni lien vers l'aperçu. Reprenons le même code, une petite transformation et voilà ce que ça donne :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Saisir et pré-visualiser un message</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
#page {
    position: absolute;
    top: 0;
    left: 50%;
    width: 600px;
    margin-left: -300px;
}
fieldset {
    border: 3px double #cc9;
}
#msg {
    width: 100%;
    border: 1px solid #000;
}
h2 {
    color: #f00;
    background-color: inherit;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* Fonction de transformation des bbCodes */
/* Fonction pour pré-visualiser le message dans la page */
function previsualiser()
{
    /* Récupération des données saisies */
    var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = msg;
   
}
/* fonction pour effacer l'aperçu */
function effacer()
{
    document.getElementById('apercu').innerHTML = '';
}
/*]]> */
</script>
</head>
<body>
  <div id="page">
    <form id="saisiemsg" action="#" method="post">
      <fieldset>
        <input type="text" id="msg" name="msg" onkeyup="previsualiser();"></textarea><br />
      </fieldset>
    </form>
    <h2 id="apercu">&nbsp;</h2>
  </div>
</body>
</html>

Quel changement ? Au lieu du bouton avec un évènement onclick, j'ai mis directement dans la zone de saisie un évènement onkeyup qui appelle la même fonction et comme c'est un titre, les bbCodes n'ont plus vraiment besoin d'être là, ça simplifie encore.

Ecrire le contenu d'un textarea modifier avec du javascript

Qui est en ligne