Bonjour, je m'inspire de
http://www.javascriptfr.com/codes/SAISIE-WYSIWYG_24237.aspx, mixée à un tutoriel du site du zéro.
Pouriez vous m'aider?
J'ai essayé d'ajouter l'insertion de smileys et de liens et images via une fenetre popup javascript, mais je n'arrive pas à insérer dans le textarea, je ne comprends pas bien quelle est la variable qui contient le texte html.
Est-ce Fen, tmp, document, txt?
je bloque depuis plusieurs jours.
si vous avez le temps de m'aider, je vous enverrais ma source.
mon code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML Lang="fr">
<HEAD>
<!--———————————————————————————————————————--->
<title>POST</title>
<!--————————————————————————————————————————-->
<meta http-equiv="cache-control"
content="no-cache" />
<meta http-equiv="content-Language"
content="fr-FR">
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires"
content="0">
<meta http-equiv="imagetoolbar"
content="no" />
<meta http-equiv="Pragma"
content="no-cache">
<meta name="robots"
content="follow" />
<!--—————————————————————————————————————————————————————————————————-->
<LINK REL="stylesheet"
TYPE="text/css"
HREF="wysiwyg.css">
<!--—————————————————————————————————————————————————————————————————-->
<Script type="Text/JavaScript"
src="wysiwyg.js"></Script>
<!--—————————————————————————————————————————————————————————————————-->
<script type="text/javascript">
<!--
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;
}
function view(textareaId, viewDiv){
var content = encodeURIComponent(document.getElementById(textareaId).value);
var xhr = getXMLHttpRequest();
if (xhr && xhr.readyState != 0) {
xhr.abort();
delete xhr;
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200){
document.getElementById(viewDiv).innerHTML = xhr.responseText;
} else if (xhr.readyState == 3){
document.getElementById(viewDiv).innerHTML = "<div style=\"text-align: center;\">Chargement en cours...</div>";
}
}
xhr.open("POST", "view.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("string=" + content);
}
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":
endTag = "</lien>";
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("Texte du lien :") || "";
startTag = "<lien url=\"" + currentSelection + "\">";
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 du lien ?");
startTag = "<lien url=\"" + URL + "\">";
}} else { // Pas de sélection, donc on demande l'URL et le libelle
var URL = prompt("Quelle est l'url du lien ?") || "";
var label = prompt("Texte du lien :") || "";
startTag = "<lien url=\"" + URL + "\">";
currentSelection = label;
}break;
case "image":
endTag = " />";
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("Description de l'image :") || "";
startTag = "<img src=\"" + currentSelection + "\" ";
currentSelection = "alt=\"" +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 de l'image ?");
startTag = "<img src=\"" + URL + "\" ";
}} else { // Pas de sélection, donc on demande l'URL et le libelle
var URL = prompt("Quelle est l'url de l'image ?") || "";
var label = prompt("Description de l'image : ") || "";
startTag = "<img src=\"" + URL + "\" ";
currentSelection = "alt=\"" +label+ "\" ";
}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;
}
function preview(textareaId, previewDiv) {
var field = textareaId.value;
if (document.getElementById('previsualisation').checked && field) {
var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', '\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':mechant:', 'o_O', '\\^\\^', ':\\#');
var smiliesUrl = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
field = field.replace(/&/g, '&');
field = field.replace(/</g, '<').replace(/>/g, '>');
field = field.replace(/\n/g, '<br />').replace(/\t/g, ' ');
field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
field = field.replace(/<lien url="([\s\S]*?)">([\s\S]*?)<\/lien>/g, '<a href="$1" title="$2">$2</a>');
field = field.replace(/<image>([\s\S]*?)<\/image>/g, '<img src="$1" alt="Image" />');
field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<span class="$1">$2</span>');
for (var i=0, c=smiliesName.length; i<c; i++) {
field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
}
document.getElementById(previewDiv).innerHTML = field;
}
}
//-->
</script>
</head>
<body color=#400040
bgcolor=#FFCC99
leftmargin=5
topmargin=5
marginheight=5
marginwidth=5
style=" background-color:#98fb98;
overflow:auto;
font-family:Verdana;"
onload="initial();">
<select size=1
id="selfnt"
style="background-color:#ffffff"
onchange="FontChx(this);">
<optgroup label="Police">
<option>Arial</option>
<option>Comic sans MS</option>
<option>Courier</option>
<option>Courier New</option>
<option>Fixedsys</option>
<option>Garamond</option>
<option>Georgia</option>
<option>Lucida Console</option>
<option>MS Sans Serif</option>
<option>MS Serif</option>
<option>Time</option>
<option>Verdana</option>
</optgroup>
</select>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<select size=1
id="seltai"
style="background-color:#ffffff"
onchange="TailChx(this);">
<optgroup label="Taille">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</optgroup>
</select>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<input type="image"
src="Bold.gif"
title="Gras"
onclick="btn1(this);"/>
<input type="image"
src="Italic.gif"
title="Italique"
onclick="btn1(this);"/>
<input type="image"
src="Underline.gif"
title="Souligné"
onclick="btn1(this);"/>
<input type="image"
src="StrikeThrough.gif"
title="Rayé"
onclick="btn1(this);"/>
<input type="image"
src="SubScript.gif"
title="Indices"
onclick="btn1(this);"/>
<input type="image"
src="SuperScript.gif"
title="Exposants"
onclick="btn1(this);"/>
<input type="image"
src="Transmettre.gif"
title="Envoyer"
onclick="maj();"/>
<br/>
<input type="image"
src="ForeColor.gif"
title="Couleur des Caractères"
onclick="CoulAff(this,document.getElementById('Saisie').style.color);"/>
<input type="image"
src="BackColor.gif"
title="Couleur du Fond"
onclick="CoulAff(this,document.getElementById('Saisie').style.backgroundColor);"/>
<input type="image"
src="JustifyLeft.gif"
title="Justifié à Gauche"
onclick="btn1(this);"/>
<input type="image"
src="JustifyRight.gif"
title="Justifié à Droite"
onclick="btn1(this)";/>
<input type="image"
src="JustifyCenter.gif"
title="Centré"
onclick="btn1(this);"/>
<input type="image"
src="InsertOrderedList.gif"
title="Liste numérotée"
onclick="btn1(this);"/>
<input type="image"
src="InsertUnorderedList.gif"
title="Liste à puces"
onclick="btn1(this);"/>
<input type="image"
src="Outdent.gif"
title="décaler à Gauche"
onclick="btn1(this);"/>
<input type="image"
src="Indent.gif"
title="décaler à Droite"
onclick="btn1(this);"/>
<input type="image"
src="Delete.gif"
title="Effacer"
onclick="btn1(this);"/>
<input type="image"
src="Undo.gif"
title="Annule actions"
onclick="btn1(this);"/>
<input type="image"
src="Redo.gif"
title="refaire l'action"
onclick="btn1(this);"/>
<input type="image"
src="SelectAll.gif"
name="imgSelectAll"
id="imgSelectAll"
title="tout sélectionner"
onclick="btn1(this);"/>
<input type="image"
src="Unselect.gif"
title="invalider la sélection"
onclick="btn1(this);"/>
<img src="images/designs/lien.png" title="lien" onclick="insertTag('<lien>','</lien>','tmp','lien');" />
<img src="images/designs/image.png" title="image" onclick="insertTag('<image>','</image>','tmp','image');" />
<br/>
<img src="images/designs/heureux.png" title=":D" onclick="insertTag(' :D ', '', 'tmp');" />
<img src="images/designs/smile.png" title=":)" onclick="insertTag(' :) ', '', 'tmp');" />
<img src="images/designs/clin.png" title=";)" onclick="insertTag(' ;) ', '', 'tmp');" />
<img src="images/designs/hihi.png" title="^^" onclick="insertTag(' ^^ ', '', 'tmp');" />
<img src="images/designs/rouge.png" title=":honte:" onclick="insertTag(' :honte: ', '', 'tmp');" />
<img src="images/designs/siffle.png" title=":#" onclick="insertTag(' :# ', '', 'tmp');" />
<img src="images/designs/triste.png" title=":(" onclick="insertTag(' :( ', '', 'tmp');" />
<img src="images/designs/pleure.png" title="'(" onclick="insertTag(' \'( ', '', 'tmp');" />
<img src="images/designs/mechant.png" title=":mechant:" onclick="insertTag(' :mechant: ', '', 'tmp');" />
<img src="images/designs/waw.png" title=":waw:" onclick="insertTag(' :waw: ', '', 'tmp');" />
<img src="images/designs/soleil.png" title=":soleil:" onclick="insertTag(' :soleil: ', '', 'tmp');" />
<img src="images/designs/langue.png" title=":p" onclick="insertTag(' :p ', '', 'tmp');" />
<img src="images/designs/pinch.png" title=">_<" onclick="insertTag(' >_< ', '', 'tmp');" />
<img src="images/designs/blink.gif" title="o_O" onclick="insertTag(' o_O ', '', 'tmp');" />
<img src="images/designs/unsure.gif" title=":euh:" onclick="insertTag(' :euh: ', '', 'tmp');" />
<img src="images/designs/rire.gif" title=":lol:" onclick="insertTag(' :lol: ', '', 'tmp');" />
<img src="images/designs/angry.gif" title=":colere:" onclick="insertTag(' :colere: ', '', 'tmp');" />
<img src="images/designs/diable.png" title=":diable:" onclick="insertTag(' :diable: ', '', 'tmp');" />
<img src="images/designs/ange.png" title=":ange:" onclick="insertTag(' :ange: ', '', 'tmp');" />
<br/>
<!--
pour FF :
execCommand("createlink",false,"http://....")
-->
<!--—————————————————————————————————————————————————————————————————-->
<iframe style=" font-family:Verdana;
font-size:12px;
position:absolute;
border:1px solid #000000;
overflow:auto;
top:110;
width:98%;
height:65%;
color:rgb(64,0,64);
background-color:rgb(250,250,255);"
name="Saisie"
id="Saisie"></iframe> <!-- laisser les couleurs sont forme rgb=(r,g,b)
########################################### -->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<form action= <?php $destination = 'traitementmessage'; echo '"'.$destination.'.php"'; ?>
method= "post" name= "frm">
<label for='titre'>titre : </label>
<input name='titre' id='titre' />
<textarea
name="txt"
id="txt"
style=" font-family:Verdana;display:none;position:absolute;font-size:12px;border-color:#000000;border:1px inset gray;
overflow:auto;top:110;width:98%;height:65%;color:#400040;background-color:#ffffff;"></textarea>
</form>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="CoulMnu"
name="CoulMnu"
style=" font-family:Verdana;
font-size:12px;
font-weight:bold;
display:none;
position:absolute;
border:1px solid #000000;
z-index:2;
left:0;
top:0;
background-color:#FFFFFF;" />
<table>
<tr>
<th> <label id="CoulQui"></label></th></tr>
<tr> <td style="text-align:right;">Choix</td>
<td> <input type="text" style="background-Color:#FFFFFF" id="chx" size=2 /></td>
<th> <button onclick="CoulVal();">Valider</button>
<button onclick="document.getElementById('CoulMnu').style.display='none';" >
Abandonner</button></th></tr>
<tr> <td></td></tr>
<tr> <td style="text-align:right;">Rouge</td>
<td> <input type="text" style="color:#FFFFFF" id="rr" size=3
onkeyup="gid('rrchgt').scrollLeft=this.value;
modCoul();" /></td>
<td> <div id="rrchgt" onscroll="modCoul();"
style="FONT-SIZE:1px;Overflow-X:scroll;WIDTH:300px;HEIGHT:20px">
<DIV style="WIDTH:555px"> </DIV></div></td></tr>
<tr> <td style="text-align:right;">Vert</td>
<td> <input type="text" style="color:#FFFFFF" id="gg" size=3
onkeyup="gid('ggchgt').scrollLeft=this.value;
modCoul();" /></td>
<td> <div id="ggchgt" onscroll="modCoul();"
style="FONT-SIZE:1px;Overflow-X:scroll;WIDTH:300px;HEIGHT:20px">
<DIV style="WIDTH:555px"> </DIV></div></td></tr>
<tr> <td style="text-align:right;">Bleu</td>
<td> <input type="text" style="color:#FFFFFF" id="bb" size=3
onkeyup="gid('bbchgt').scrollLeft=this.value;
modCoul();" /></td>
<td> <div id="bbchgt" onscroll="modCoul();"
style="FONT-SIZE:1px;Overflow-X:scroll;WIDTH:300px;HEIGHT:20px">
<DIV style="WIDTH:555px"> </DIV></div></td></tr>
</table>
</div>
<!--—————————————————————————————————————————————————————————————————-->
</body></html>
<!--—————————————————————————————————————————————————————————————————-->