Editeur WYSIWYG perso

**Clorge** · 21/03/2013, 18h35

Bonsoir

J'essaye de répondre à une question auquel google ne me fournis aucune réponse qui m'aille.
J'aimerais créer un http://fr.wikipedia.org/wiki/WYSIWYG ceux qui me demande pourquoi pas utiliser un existant, je répond : c'est plus fun et c'est toujours intéressant de savoir comment ça marche)
Faire un éditeur avec les balises bbcode, ça je pense y arrivais, mais c'est chiant à modifier le bbcode... Donc je préférerais en WYSIWYG

J'ai déjà essayer de mettre des balises html via javascript dans un textarea, mais forcément c'est pas interpreter :')
J'ai également regarder du coté des nouveautés html5 http://html5demos.com/contenteditable
Mais rien qui me permette de :
modifier les propriétés de chaque caractère du texterea et de récuperer le tout en bbcode à la fin.

Pouvez-vous m'aider dans cette recherche ?

**SylvainPV** · 21/03/2013, 18h59

C'est tout simplement parce qu'un textarea ne convient pas. Un textarea est une zone de texte, comprendre texte non formatté.

C'est pour cela que quand tu prévisualises un message avant de le poster, il n'apparaît pas dans la zone de texte mais dans un cadre au-dessus, traduit en HTML.

Si tu veux réunir la zone d'édition avec la zone de prévisualisation, c'est pas mal de boulot. Il faut que ton conteneur "ait l'air d'une textarea", mais en arrière plan c'est un conteneur avec plein de différents éléments HTML à l'intérieur et plein de code Javascript pour gérer la saisie.

**Bovino** · 21/03/2013, 21h38

de récuperer le tout en bbcode à la fin

Alors là, j'avoue que je comprends plus rien...
Tu veux créer un éditeur WYSIWYG afin de transformer le texte saisi en BBCode ?

Tu es au courant que toute forme de torture psychologique et / ou mentale est interdite ?

**Clorge** · 21/03/2013, 23h41

Envoyé par SylvainPV

C'est tout simplement parce qu'un textarea ne convient pas. Un textarea est une zone de texte, comprendre texte non formatté.

C'est pour cela que quand tu prévisualises un message avant de le poster, il n'apparaît pas dans la zone de texte mais dans un cadre au-dessus, traduit en HTML.

Si tu veux réunir la zone d'édition avec la zone de prévisualisation, c'est pas mal de boulot. Il faut que ton conteneur "ait l'air d'une textarea", mais en arrière plan c'est un conteneur avec plein de différents éléments HTML à l'intérieur et plein de code Javascript pour gérer la saisie.

Oui, je comprend bien, mais j'ai véritablement aucune idée de comment je pourrais réaliser ça, admettons que j'arrive à ajouter des boutons à l'intérieur d'un "faux textarea" (je sais pas trop comment expliquer) et que je recupere la selection active pendant l'appuie sur un button, comment je fait pour le mettre en forme ? j'ai créer un nouvel élément html avec les style associé et je le met en position relative/absolue ? alors à ce moment, comment on peux le remodifier ou genre si l'élement n'était qu'un mot de la phrase, comment par la suite, crée un style pour la phrase entière ?

Envoyé par Bovino

Alors là, j'avoue que je comprends plus rien...
Tu veux créer un éditeur WYSIWYG afin de transformer le texte saisi en BBCode ?

Tu es au courant que toute forme de torture psychologique et / ou mentale est interdite ?

Je pense que je me suis mal exprimé, je parle du texte send au serveur. L'utilisateur ne voit QUE le WYSIWYG, mais dans le contenu du textarea, le texte qui seras envoyer au serveur, seras du bbcode, et en cas d'édition, il faudrais que l'éditeur reconvertisse le bbcode en "WYSIWYG"

Des idées pour l'implémentation ? Je sèche totalement...

EDIT : un petit code commence à voir le jour, je le post quand il commence à ressembler à quelque chose

**SylvainPV** · 22/03/2013, 00h57

ça fait beaucoup de questions et on n'a pas toutes les réponses. Placer les boutons et réaliser l'UI c'est une chose, faire tout le code Javascript qui manipule la sélection en cours, traduit en éléments HTML etc... c'en est une autre.

Ca pourrait être une bonne idée de consulter le code source d'un éditeur WYSIWYG sur github pour débroussailler le terrain.

**Clorge** · 22/03/2013, 01h50

Oui, je m'en rend compte et je m'en excuse.
Je pense re-center les questions en lui présentant ce mini-mini-début de code :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Title</title>
		<meta charset="utf-8"/>
 
		<script>
function getSelectedText()
{
	var sel=false;
	if (document.getSelection) sel = document.getSelection();
	else if (document.selection) sel = document.selection.createRange().text;
	return sel;
}
 
function add(element)
{
	var attribut=element.getAttribute("class");
	var texte=getSelectedText();
	var css='';
	if(attribut=='gras')
		css='font-weight: bold;';
	if(attribut=='italic')
		css='font-style:italic;';
	if(attribut=='underline')
		css='text-decoration: underline;';
 
	//pas réussi à le faire marcher >_<"
	//element.parentNode.parentNode.childNodes[1].childNodes[0].innerHTML="test";
	document.getElementById("test").innerHTML+='<span style="'+css+'">'+texte+'</span>';
}
function getSelectValue(selectId)
{
	/**On récupère l'élement html <select>*/
	var selectElmt = document.getElementById(selectId);
	/**
	selectElmt.options correspond au tableau des balises <option> du select
	selectElmt.selectedIndex correspond à l'index du tableau options qui est actuellement sélectionné
	*/
	return selectElmt.options[selectElmt.selectedIndex].value;
}
		</script>
		<style>
._ {  padding:0px; word-wrap:break-word; width:100%; } ._ ._ { display:inline-block; vertical-align: top; border-radius:10px; }
 
.WYSIWYG
{
width: 50%;
border: 2px solid black;
border-radius:10px;
padding:20px;
}
.WYSIWYG div[contenteditable]
{
	padding:10px;
	background-color: green;
}
.WYSIWYG .gras
{
	font-weight: bold;
}
.WYSIWYG .italic
{
	font-style:italic;
}
.WYSIWYG .underline
{
	text-decoration: underline;
}
 
.WYSIWYG img
{
cursor: pointer;
}
 
		</style>
	</head>
	<body>
		<div id="page">
			<form method="post" action="editeur.php">
				<noscript>
					Vous avez javascript de désactiver, ce qui vous empeche de profiter de l'éditeur 
					<textarea id="editeur_simple">
						Selectionner moi qui ne fonctionne pas
					</textarea>
				</noscript>
			</form>
 
			<div class="_ WYSIWYG">
				<div class="_"> 
					<div class="_" style="width:100%;">
						<div style="padding:10px;">
							<button class="gras" onclick="add(this);">B</button>
							<button class="italic" onclick="add(this);">i</button>
							<button class="underline" onclick="add(this);">u</button>
							<button class="quote" onclick="add(this);">Quote</button>
							<button class="code" onclick="add(this);">Code</button>
							<button class="img" onclick="add(this);">Img</button>
							<button class="url" onclick="add(this);">Url</button>
							<select>
								<option>Tailles</option>
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
							</select>
							<select>
								<option value="">Couleurs</option><option value=""></option><option value="Black" style="background-color: rgb(0, 0, 0);">Black</option><option value="Sienna" style="background-color: rgb(160, 82, 45);">Sienn...</option><option value="DarkOliveGreen" style="background-color: rgb(85, 107, 47);">Dark O...</option><option value="DarkGreen" style="background-color: rgb(0, 100, 0);">Dark G...</option><option value="DarkSlateBlue" style="background-color: rgb(72, 61, 139);">Dark S...</option><option value="Navy" style="background-color: rgb(0, 0, 128);">Navy</option><option value="Indigo" style="background-color: rgb(75, 0, 130);">Indig...</option><option value="DarkSlateGray" style="background-color: rgb(47, 79, 79);">Dark S...</option><option value="DarkRed" style="background-color: rgb(139, 0, 0);">Dark R...</option>
								<option value="DarkOrange" style="background-color: rgb(255, 140, 0);">Dark O...</option><option value="Olive" style="background-color: rgb(128, 128, 0);">Olive</option><option value="Green" style="background-color: rgb(0, 128, 0);">Green</option><option value="Teal" style="background-color: rgb(0, 128, 128);">Teal</option><option value="Blue" style="background-color: rgb(0, 0, 255);">Blue</option><option value="SlateGray" style="background-color: rgb(112, 128, 144);">Slate...</option><option value="DimGray" style="background-color: rgb(105, 105, 105);">Dim Gr...</option><option value="Red" style="background-color: rgb(255, 0, 0);">Red</option><option value="SandyBrown" style="background-color: rgb(244, 164, 96);">Sandy...</option><option value="YellowGreen" style="background-color: rgb(154, 205, 50);">Yello...</option>
								<option value="SeaGreen" style="background-color: rgb(46, 139, 87);">Sea Gr...</option><option value="MediumTurquoise" style="background-color: rgb(72, 209, 204);">Mediu...</option><option value="RoyalBlue" style="background-color: rgb(65, 105, 225);">Royal...</option><option value="Purple" style="background-color: rgb(128, 0, 128);">Purpl...</option><option value="Gray" style="background-color: rgb(128, 128, 128);">Gray</option><option value="Magenta" style="background-color: rgb(255, 0, 255);">Magen...</option><option value="Orange" style="background-color: rgb(255, 165, 0);">Orang...</option><option value="Yellow" style="background-color: rgb(255, 255, 0);">Yello...</option><option value="Lime" style="background-color: rgb(0, 255, 0);">Lime</option><option value="Cyan" style="background-color: rgb(0, 255, 255);">Cyan</option>
								<option value="DeepSkyBlue" style="background-color: rgb(0, 191, 255);">Deep S...</option><option value="DarkOrchid" style="background-color: rgb(153, 50, 204);">Dark O...</option><option value="Silver" style="background-color: rgb(192, 192, 192);">Silve...</option><option value="Pink" style="background-color: rgb(255, 192, 203);">Pink</option><option value="Wheat" style="background-color: rgb(245, 222, 179);">Wheat</option><option value="LemonChiffon" style="background-color: rgb(255, 250, 205);">Lemon...</option><option value="PaleGreen" style="background-color: rgb(152, 251, 152);">Pale G...</option><option value="PaleTurquoise" style="background-color: rgb(175, 238, 238);">Pale T...</option><option value="LightBlue" style="background-color: rgb(173, 216, 230);">Light...</option>
								<option value="Plum" style="background-color: rgb(221, 160, 221);">Plum</option><option value="White" style="background-color: rgb(255, 255, 255);">White</option>
							</select>
							<select>
								<option>Align</option>
								<option>Center</option>
								<option>Right</option>
								<option>Left</option>
							</select>
							<select>
								<option>Liste</option>
								<option>Normal</option>
								<option>Numéroté</option>
							</select>
 
						</div>
					</div>
				</div>
				<div class="_"> 
					<div class="_" style="width:75%;">
						<div style="padding:10px;">
							<div contenteditable id="test">Selectionner moi</div>
						</div>
					</div><!--
					--><div class="_" style="width:25%;">
						<div style="padding:10px;">
							<fieldset>
								<legend>Smiley</legend>
								<img src="http://www.developpez.net/forums/images/smilies/icon_eek.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_rolleyes.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/zoubi.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/toine.gif" />
								<br />
								<img src="http://www.developpez.net/forums/images/smilies/icon_smile.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/calim2.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/aie.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_sad.gif" />
								<br />
								<img src="http://www.developpez.net/forums/images/smilies/icon_mrgreen.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_cry.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_biggrin.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_redface.gif" />
								<br />
 
								<img src="http://www.developpez.net/forums/images/smilies/icon_razz.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/ccool.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_lol.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_cool.gif" />
								<br />
								<img src="http://www.developpez.net/forums/images/smilies/icon_wink.gif" />
								<img src="http://www.developpez.net/forums/images/smilies/icon_confused.gif" />
							</fieldset>
							<br />
						</div>
					</div>
				</div>
			</div>
 
		</div>
	</body>
</html>

Seul les trois premiers boutons fonctionnent

les autres c'était pour que je puisse imaginer les différents types de choses qui seront à gérer.
Donc ça utilise les nouvelles spécifications html5 (et perso, j'en ai rien à foutre des anciens navigateurs, si tous le monde fait des hack pour IE2, jamais ils se mettrons à jour...)
Comme vous l'avez vu, je ne fait qu'incrémenter la valeur du div, parce que j'ai pas trouver comment faire, ou du moins, pour un div!
D'un coté textarea veut pas d'html inclus, et de l'autre il veut bien faciliter la selection

Alors qu'as cela ne tienne, je vais utiliser les avantages les deux, j'ai juste à trouver comment le faire