Discussion :

[shaun_the_sheep]

Bonjour,

Supposant que la solution existe déjà et qu'il ne sert à rien de réinventer l'excitant , Je cherche une solution toute faite d'éditeur de texte avec un assistant de mise en forme HTML (avec les balises standard / smileys inutiles) du texte , comme par exemple le forum.

C'est pour l'intégrer dans une application Web (J2EE).

Je vous remercie de votre aide.

[shaun_the_sheep]

bon j'ai trouvé quelques choses

Le HTML :

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
<table><tr>
		<td><input type="button" value="P" onclick="insertTag('<p>','</p>','txtCorpsEmailfr');"/></td>
		<td><input type="button" value="G" onclick="insertTag('<b>','</b>','txtCorpsEmailfr');"/></td>
		<td><input type="button" value="I" onclick="insertTag('<i>','</i>','txtCorpsEmailfr');"/></td>
		<td><input type="button" value="U" onclick="insertTag('<u>','</u>','txtCorpsEmailfr');"/></td>
		<td><input type="button" value="Lien" onclick="insertTag('<a>','</a>','txtCorpsEmailfr','lien');"/></td>
		<td><select onchange="insertTag('<' + this.options[this.selectedIndex].value + '>', '</' + this.options[this.selectedIndex].value + '>','txtCorpsEmailfr');">
				<option value="none" class="selected" selected="selected">Taille</option>
				<option value="H6">Très très petit</option>
				<option value="H5">Très petit</option>
				<option value="H4">Petit</option>
				<option value="H3">Gros</option>
				<option value="H2">Très gros</option>
				<option value="H1">Très très gros</option>
			</select></td></tr></table>

Le javascript :

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
52
53
54
55
56
57
58
59
60
61
 
function insertTag(startTag, endTag, textareaId, tagType) {
    var field  = document.getElementById(textareaId); 
    var scroll = field.scrollTop;
    field.focus();
 
    /* === Partie 1 : on récupère la sélection === */
    if (window.ActiveXObject) {
            var textRange = document.selection.createRange();            
            var currentSelection = textRange.text;
    } else {
            var startSelection   = field.value.substring(0, field.selectionStart);
            var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
            var endSelection     = field.value.substring(field.selectionEnd);               
    }
 
    /* === Partie 2 : on analyse le tagType === */
    if (tagType) {
            switch (tagType) {
                    case "lien":
                            // Si c'est un lien
                            endTag = "</a>";
					        if (currentSelection) { // Il y a une sélection
					                if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("https://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
					                        // La sélection semble être un lien. On demande alors le libellé
					                        var label = prompt("Quel est le libellé du lien ?") || "";
					                        startTag = "<a href=\"" + currentSelection + "\" target='_blank'>";
					                        currentSelection = label;
					                } else {
					                        // La sélection n'est pas un lien, donc c'est le libelle. On demande alors l'URL
					                        var URL = prompt("Quelle est l'url ?");
					                        startTag = "<a href=\"" + URL + "\" target='_blank'>";
					                }
					        } else { // Pas de sélection, donc on demande l'URL et le libelle
					                var URL = prompt("Quelle est l'url ?") || "";
					                var label = prompt("Quel est le libellé du lien ?") || "";
					                startTag = "<a href=\"" + URL + "\" target='_blank'>";
					                currentSelection = label;                     
					        }
 
                    break;
                    case "citation":
                            // Si c'est une citation
                    break;
            }
    }
 
    /* === Partie 3 : on insère le tout === */
    if (window.ActiveXObject) {
            textRange.text = startTag + currentSelection + endTag;
            textRange.moveStart("character", -endTag.length - currentSelection.length);
            textRange.moveEnd("character", -endTag.length);
            textRange.select();     
    } else {
            field.value = startSelection + startTag + currentSelection + endTag + endSelection;
            field.focus();
            field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
    } 
 
    field.scrollTop = scroll;     
}

[albedo0]

Les deux plus connus :
- CKeditor
- tinymce