Discussion :

[viena]

Bonjour tout le monde,

Je suis en phase d'analyse préalable d'un projet Web (Java/J2EE).

La partie quee j'étudie actuellement est la suivante :

Principe : l'utilisateur peut créer un courrier/mail/sms à partir d'une interface Web (même solution quelque soit le type d'envoi choisi). Il peut effectuer un peu de mise en valeur, mais très limitée (surement uniquement de la mise en gras et du souligné).

Solution fonctionnelle envisagée : un éditeur (comme un éditeur de texte HTML : mails, posts...). Sauf qu'au lieu de créer du HTML, cet éditeur créerait du XML. En gros, dans un courrier, chaque partie serait représenté par un TAG (adresse, expediteur, paragraphe...). Et des TAGs définiront également la mise en valeur.

Solution technique envisagée : les icones correspondant aux possibilités de mises en forme proposées à l'utilisateur. Un textArea de saisie. Comme dans n'importe quel editeur texte HTML, l'utilisateur selectionne le texte qu'il veut modifié et clic sur l'icone correspondant à ce qu'il veut faire. Derrière, l'appli se charge de créer le fichier XML en fonction.

Dans cette solution technique, j'ai un blanc au niveau de la récupération du texte selectionné dans la textArea. Est ce possible ? Comme est ce que l'on fait ? C'est peut être du javascript... je sais pas trop.

Sinon, avez vous une idée de solution alternative ? Je sais qu'il existe des editeur tout fait (je me suis renseignées sur FCKeditor par exemple), mais ils générent du HTML et il nous faudra effectuer des evolutions importantes, maintenir cet editeur modifié... or qu'on n'utiliserait vraiment très peu de ses possibilités. Nous ne sommes pas surs que ce soit rentable.

Voilà, toute idée est la bienvenue. Merci

[Bisûnûrs]

Est-ce que ça te convient et réponds correctement à ta question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
 
 
 
function getInsertedTag(previousText,selectedText,tagStart,tagEnd) {
  if (selectedText.length==0) {
    var escTagStart = tagStart.replace("[","\\[").replace("]","\\]");
    var escTagEnd = tagEnd.replace("[","\\[").replace("]","\\]");
    var searchTagStart = new RegExp(escTagStart,"gi"); resultStart = previousText.match(searchTagStart);
    var searchTagEnd = new RegExp(escTagEnd,"gi"); resultEnd = previousText.match(searchTagEnd);
    numTagsStart = (resultStart==null)?0:resultStart.length;
    numTagsEnd = (resultEnd==null)?0:resultEnd.length;
    if ( numTagsEnd >= numTagsStart )
        return tagStart;
    else
        return tagEnd;
  }
  else {
    return tagStart + selectedText + tagEnd;
  }
}
 
function insertTagAtCursor(myField, myTag, bbMode) {
   //IE support
  tagStart = "["+myTag+"]"; tagEnd = "[/"+myTag+"]";
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = getInsertedTag(myField.value.substring(0, sel.startOffset),sel.text,tagStart,tagEnd);
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
      var startPos = myField.selectionStart;
      var endPos = myField.selectionEnd;
      var myValue = getInsertedTag(myField.value.substring(0, startPos),myField.value.substring(startPos, endPos),tagStart,tagEnd);
      myField.value = myField.value.substring(0, startPos)
      + myValue
      + myField.value.substring(endPos, myField.value.length);
      myField.selectionEnd=startPos+myValue.length;
      myField.focus();
    } else {
      myField.value += getInsertedTag(myField.value,"",tagStart,tagEnd);
      myField.focus();
  }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#" onclick="insertTagAtCursor(MM_findObj('etid'),'b'); return false;">Gras</a>
<textarea class="formtextarea" id="etid" name="post_text" cols="100" rows="8"></textarea>

?

[viena]

Dans l'ensemble, ça a l'air de répondre au problème effectivement.

Cependant, j'ai besoin d'un coup de main pour bien tout comprendre Vu que je suis pas une grande surdouée du HTML et du JS

Est ce bien "sel = document.selection.createRange()" qui permet de trouver la selection ?

[Bisûnûrs]

J'ai édité mon précédent post, ayant oublié de mettre la fonction Dreamweaver function MM_findObj(). ^^

Oui, c'est bien cette ligne qui permet de trouver la sélection.

createRange créé un objet de la selection réalisée et renvoie l'objet créé.

[viena]

Oki, eh bien merci beaucoup. Maintenant que je sais que c'est possible et pas spécialement complexe, je vais pouvoir partir sur cette solution sans problème.