Wysiwyg

[BilouZ]

Bonjour à tous.

Passionné par tout ce qui touche le monde du web, j'ai désiré créer mon propre Wysiwyg. .

Une fois terminé je me suis rendu compte qu'il me manque un textarea (je suppose) pour récupérer ce qui se trouve dans mon iframe, mais c'est là que je bloque.

Comment faire?

Merci d'avance.

[Patrick]

Bonjour Bilouz,

Hum un peu vague tout ça.

Ton éditeur est en ligne ? Si oui donne nous l'URL ça sera déjà plus facile de regarder et te donner une réponse.

++

Patrick

[BilouZ]

Non, il n'est pas en ligne mais je peux afficher les codes

Page avec le formulaire

		<form method="post" name="Editor" action="index.php">
 		<iframe class="wysiwygIframe" frameborder="0"  name="editeur" id="editeur" onload="initialisation()"></iframe>
    	<div id="wysiwygFooter">
    		<input id="sourceHTML" onclick="viewsource(this.checked)" type="checkbox">
            <label for="sourceHTML">Afficher la source</label> - <a href="infos/index.html" target="_blank" style="cursor: pointer;">Aide ?</a>
            <input name="envoyer" type="submit" value="Envoyer"/>
    	</div>

		</form>

Page du JS

nav = "";
nav = navigator.appName;

function initialisation()
{ 
	if(nav == "Microsoft Internet Explorer"){
	win = window.frames["editeur"];
	doc = win.document;
	}else{
	doc = document.getElementById("editeur").contentDocument;
	win = document.getElementById("editeur").contentWindow;
	}

	if(doc.designMode != "On"){
	doc.designMode = "On";}

win.focus();
}


function plusHtml(plus)
{
	document.getElementById("editeur").contentWindow.document.body.innerHTML = document.getElementById("editeur").contentWindow.document.body.innerHTML+plus;
}


function addElement(choix)
{
	if(choix == "lien"){
		url = prompt("Quel est la cible du lien?","http://");
		titreUrl = prompt("Titre du lien?",""+url+"");
		if(url!="http://"){	plusHtml("<a href='"+url+"' target=\"_blank\">"+titreUrl+"</a>");
		}else{ plusHtml("");}

	}else if(choix == "img"){
		url = prompt("Quel est l'adresse de l'image?","http://");
		if(url!="http://"){	plusHtml("<img src='"+url+"'style=\"margin:5px;\" alt=\"Image\" align=\"left\"/>");
		}else{ plusHtml("");}		

	}else if(choix == "flash"){
		url = prompt("Quel est l'adresse du fichier?","http://");
		if(url!="http://"){
			plusHtml('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="quality" value="high" /><param name="movie" value="'+url+'" /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="'+url+'" type="application/x-shockwave-flash"></embed></object>');
		}else{ plusHtml("");}	

	}else if(choix == "email"){
		email = prompt("Adresse eMail ","");
		mail = prompt("Titre de l'eMail ","");
		if(mail){
			plusHtml("<a href=mailto:"+email+"/>"+mail+"</a>");  
		}else{ plusHtml("");}	

	}else if(choix == "tableau"){
		ligne = prompt("Nombre de ligne","1");
		colonne = prompt("Nombre de colonne","2");
		entete = confirm("Voulez-vous une en-tête");
		var texte = '';
		if(ligne){

			if(entete==true){// Si entete = 1
				texte += '<tr>'+"\n";
				for (var colonnes2=colonne; colonnes2>0; colonnes2=colonnes2-1){	

							texte += '<td>En tete'+"\n";
							texte += '</td>'+"\n";
						}
				texte += '</tr>'+"\n";
			}// Fin de l'entete

			// Début du tableau
			for (var lignes2=ligne; lignes2>0; lignes2=lignes2-1){
			texte += '<tr>'+"\n";


					for (var colonnes2=colonne; colonnes2>0; colonnes2=colonnes2-1){	

						texte += '<td>Texte'+"\n";
						texte += '</td>'+"\n";
					}
			texte += '</tr>'+"\n";
			}
			plusHtml('<table width="100" border="1" cellspacing="0" cellpadding="0">'+"\n"+texte,'\n</table>');
			plusHtml('<br>');// redonne le focus au dessus du tableau
		}

	}else if(choix == "ligneSeparateur"){
		plusHtml('<hr /><br>');

	}else if(choix == "information"){
		plusHtml('<div class="information">Information</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}else if(choix == "attention"){
		plusHtml('<div class="attention">Attention</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}else if(choix == "erreur"){
		plusHtml('<div class="erreur">Erreur</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}else if(choix == "question"){
		plusHtml('<div class="question">Question</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}else if(choix == "astuce"){
		plusHtml('<div class="astuce">Astuce</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}else if(choix == "remarque"){
		plusHtml('<div class="remarque">Remarque</div><div class="cadre">Votre texte ici</div><br>');	
		plusHtml('<br>');
	}


	// Passage des smileys
	var urlSmileys="templates/smileys/";	// Url du dossier des smileys
	if(choix == ":confused:"){
		plusHtml('<img src="'+urlSmileys+'confused.gif" width="18" height="18" title="smileys" alt="smileys" style="margin-left:5px; margin-right:5px;">');
	}else if(choix == ""){........}


}


function setContent(action)
{
	if(nav == "Microsoft Internet Explorer"){
		win = window.frames['editeur'];
		doc = win.document;
	}else{
		win = document.getElementById('editeur').contentWindow;
		doc = document.getElementById('editeur').contentDocument;
	}
doc.execCommand(action,false,null);
win.focus();
}


function changeTaille(taille)
{
	if(nav == "Microsoft Internet Explorer"){
		win = window.frames['editeur'];
		doc = win.document;
	}else{
		win = document.getElementById('editeur').contentWindow;
		doc = document.getElementById('editeur').contentDocument;
	}
doc.execCommand("FontSize",false,taille);
win.focus();
}

function changerFlottant(flottant)
{
	if(nav == "Microsoft Internet Explorer"){
		win = window.frames['editeur'];
		doc = win.document;
	}else{
		win = document.getElementById('editeur').contentWindow;
		doc = document.getElementById('editeur').contentDocument;
	}
doc.execCommand("float",false,flottant);
win.focus();
}


function changer()
{
	document.getElementById('code').value = document.getElementById("editeur").contentWindow.document.body.innerHTML;
}


function changerCouleur(couleur)
{
	if(nav == "Microsoft Internet Explorer"){
		win = window.frames['editeur'];
		doc = win.document;
	}else{
		win = document.getElementById('editeur').contentWindow;
		doc = document.getElementById('editeur').contentDocument;
	}
doc.execCommand("ForeColor",false,couleur);
win.focus();
}


function mettreHTML()
{document.getElementById("contenu").value = document.getElementById("editeur").contentWindow.document.body.innerHTML;}



////////////////////////////////////////////////////////////
function viewsource(source)// Affichage de source du contenu
{
  var html;
  if (source) {
    html = document.createTextNode(document.getElementById('editeur').contentWindow.document.body.innerHTML);
    document.getElementById('editeur').contentWindow.document.body.innerHTML = "";
    html = document.getElementById('editeur').contentWindow.document.importNode(html,false);
	document.getElementById('editeur').contentWindow.document.body.appendChild(html);
    document.getElementById("toolbar1").style.visibility="hidden";
    document.getElementById("toolbar2").style.visibility="hidden";  
  } else {
    html = document.getElementById('editeur').contentWindow.document.body.ownerDocument.createRange();
    html.selectNodeContents(document.getElementById('editeur').contentWindow.document.body);
    document.getElementById('editeur').contentWindow.document.body.innerHTML = html.toString();
    document.getElementById("toolbar1").style.visibility="visible";
    document.getElementById("toolbar2").style.visibility="visible";  
  }
}

Modifié 27 Septembre 2009 par Dan