Wysiwyg, simple, sans pretention

Description

Je poste ici un petit editeur wysiwyg que j'essaye de mettre en place grâce à execCommand(),
j'envisage de faire aussi de la coloration de code grâce aux xmlhttprequest et de nettoyer le code html en xhtml :)
Merci de m'aider si vous avez déjà effectuer ces tâches !

Source / Exemple :


function Wysiwyg(id, objectId) {
    if (!id || !objectId) { 
		alert('Wysiwyg.constructor(id, objectId) erreur, deux arguments sont requis'); 
		return;
	}
	
    var self = this;
	
    this.id = id;
    this.objectId = objectId;
    this.frame;
    this.height = '300px'; // Height in px
    this.width = '500px'; // Width in px
    this.viewSource = false;
    this.path = ''; // Path whith slash at the end
    this.cssFile = '';
    this.charset = 'iso-8859-1';
    this.editorHtml = '';
    this.frameHtml = '';
    this.textareaValue = '';
	
    this.browser = {
        'ie': Boolean(document.body.currentStyle),
        'gecko' : (navigator.userAgent.toLowerCase().indexOf('gecko') != -1)
    };

    this.init = function() {
        if (document.getElementById && document.createElement && document.designMode && (this.browser.ie || this.browser.gecko)) {
            // EDITOR
            if (!document.getElementById(this.id)) { 
				alert('Wysiwyg ' + this.objectId + ' . init() erreur, l\'element "' + this.id + '" n\'existe pas'); 
				return; 
			}
            this.textareaValue = document.getElementById(this.id).value;
            var wysiwyg = document.createElement('div');
			
            document.getElementById(this.id).parentNode.replaceChild(wysiwyg, document.getElementById(this.id));
            wysiwyg.id = this.id + '-wysiwyg';
            wysiwyg.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();
            // BUTTONS
            var buttons = wysiwyg.getElementsByTagName('td');
            for (var i = 0; i < buttons.length; ++i) {
                if (buttons[i].className == 'button') {
                    buttons[i].id = this.id + '-button-' + i;
                    buttons[i].onmouseover = function() { 
												this.className = 'button-hover'; 
											}
                    buttons[i].onmouseout = function() { 
												this.className = this.className.replace(/button-hover(\s)?/, 'button'); 
											}
                    buttons[i].onclick = function(id) { 
											return function() { 
												this.className = 'button-hover button-click'; 
												setTimeout(
													function() { 
														document.getElementById(id).className = document.getElementById(id).className.replace(/(\s)?button-click/, ''); 
													}, 100); 
											} 
										} 
					(buttons[i].id);
			   }	
            }
            // FRAME
            if (this.browser.ie) 
                this.frame = frames[this.id + '-frame'];
            else if (this.browser.gecko)
                this.frame = document.getElementById(this.id + '-frame').contentWindow;
          
            this.frame.document.designMode = 'on';
            this.frame.document.open();
            this.frame.document.write(this.frameHtml ? this.frameHtml : this.getFrameHtml());
            this.frame.document.close();
            insertHtmlFromTextarea();
        }
    };

    function lockUrls(s) {
        if (self.browser.gecko) { 
			return s; 
		}
        return s.replace(/href=["']([^"']*)["']/g, 'href="wysiwyg://wysiwyg/$1"');
    }

    function unlockUrls(s) {
        if (self.browser.gecko) { 
			return s; 
		}
        return s.replace(/href=["']wysiwyg:\/\/wysiwyg\/([^"']*)["']/g, 'href="$1"');
    }

    function insertHtmlFromTextarea() {
        try { 
			self.frame.document.body.innerHTML = lockUrls(self.textareaValue); 
		} 
		catch (e) { 
			setTimeout(insertHtmlFromTextarea, 10); 
		}
    }
	
    this.getEditorHtml = function() {
        var html = '';
        html += '<input type="hidden" id="' + this.id + '" name="' + this.id + '" value="">';
		html += '<table class="wysiwyg" cellspacing="0" cellpadding="0" height=' + this.height + ' width="' + this.width + '">';
		html += '  <tr>';
		html += '  	<td>';
		html += '	 <table class="bar" id="' + this.id + '-buttons" cellspacing="0" cellpadding="0">';
		html += '	   <tr>';
		html += '	   	<td>';
		html += '		<table cellspacing="0" cellpadding="0">';
		html += '  		  <tr>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/cut.gif" width="18" height="18" alt="Couper" title="Couper (CTRL + X)" onclick="' + this.objectId + '.execCommand(\'Cut\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/copy.gif" width="18" height="18" alt="Copier" title="Copier (CTRL + C)" onclick="' + this.objectId + '.execCommand(\'Copy\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/paste.gif" width="18" height="18" alt="Coller" title="Coller (CTRL + V)" onclick="' + this.objectId + '.execCommand(\'Paste\')"></td>';
        html += '   	   <td><div class="separator"></div></td>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/undo.gif" width="18" height="18" alt="Annuler vers l\'arrière" title="Annuler vers l\'arrière" onclick="' + this.objectId + '.execCommand(\'Undo\')"></td>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/redo.gif" width="18" height="18" alt="Annuler vers l\'avant" title="Annuler vers l\'avant" onclick="' + this.objectId + '.execCommand(\'Redo\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/anchor.gif" width="18" height="18" alt="Ancre nommé" title="Ancre nommé" onclick="' + this.objectId + '.execCommand(\'createbookmark\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/link.gif" width="18" height="18" alt="Hyperlien" title="Hyperlien" onclick="' + this.objectId + '.execCommand(\'CreateLink\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/mail.gif" width="18" height="18" alt="Mailto" title="Mailto" onclick="' + this.objectId + '.execCommand(\'Mail\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
	    html += '    	   <td class="button"><img src="' + this.path + 'images/image.gif" width="18" height="18" alt="Image" title="Image" onclick="' + this.objectId + '.execCommand(\'InsertImage\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
	    html += '    	   <td class="button"><img src="' + this.path + 'images/hr.gif" width="18" height="18" alt="Barre horizontale" title="Barre horizontale" onclick="' + this.objectId + '.execCommand(\'InsertHorizontalRule\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/erase.gif" width="18" height="18" alt="Aucune mise en forme" title="Aucune mise en forme" onclick="' + this.objectId + '.execCommand(\'RemoveFormat\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/cite.gif" width="18" height="18" alt="Citer" title="Citer" onclick="' + this.objectId + '.execCommand(\'Cite\')"></td>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/accronym.gif" width="18" height="18" alt="Acronyme" title="Acronyme" onclick="' + this.objectId + '.execCommand(\'Acronym\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/help.gif" width="18" height="18" alt="Help" title="Help" onclick="' + this.objectId + '.openWindow(\'' + this.path + 'test.html\', \'600\', \'600\')"></td>';
		html += '  		  </tr>';
		html += '		</table>';
		html += '	   	</td>';
		html += '	   </tr>';
		html += '	   <tr>';
		html += '	   	<td>';
		html += '		<table cellspacing="0" cellpadding="0">';
		html += '  		  <tr>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/bold.gif" width="18" height="18" alt="Gras" title="Gras" onclick="' + this.objectId + '.execCommand(\'Bold\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/italic.gif" width="18" height="18" alt="Italique" title="Italique" onclick="' + this.objectId + '.execCommand(\'Italic\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/underline.gif" width="18" height="18" alt="Souligner" title="Souligner" onclick="' + this.objectId + '.execCommand(\'Underline\')"></td>';
		html += '   	   <td class="button"><img src="' + this.path + 'images/strike.gif" width="18" height="18" alt="Barrer" title="Barrer" onclick="' + this.objectId + '.execCommand(\'StrikeThrough\')"></td>';
        html += '   	   <td><div class="separator"></div></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/left.gif" width="18" height="18" alt="Aligner à gauche" title="Aligner à gauche" onclick="' + this.objectId + '.execCommand(\'JustifyLeft\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/center.gif" width="18" height="18" alt="Centrer" title="Centrer" onclick="' + this.objectId + '.execCommand(\'justifycenter\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/right.gif" width="18" height="18" alt="Aligner à droite" title="Aligner à droite" onclick="' + this.objectId + '.execCommand(\'JustifyRight\')"></td>';
        html += '   	   <td class="button"><img src="' + this.path + 'images/justify.gif" width="18" height="18" alt="Justifier" title="Justifier" onclick="' + this.objectId + '.execCommand(\'JustifyFull\')"></td>';
        html += '   	   <td><div class="separator"></div></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/ul.gif" width="18" height="18" alt="Liste simple" title="Liste simple" onclick="' + this.objectId + '.execCommand(\'InsertUnorderedList\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/ol.gif" width="18" height="18" alt="Liste numérotée" title="Liste numérotée" onclick="' + this.objectId + '.execCommand(\'InsertOrderedList\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/outdent.gif" width="18" height="18" alt="Retrait négatif du texte" title="Retrait négatif du texte" onclick="' + this.objectId + '.execCommand(\'Outdent\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/indent.gif" width="18" height="18" alt="Retrait du texte" title="Retrait du texte" onclick="' + this.objectId + '.execCommand(\'Indent\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
	  	html += '    	   <td class="button"><img src="' + this.path + 'images/bgcolor.gif" width="18" height="18" alt="Couleur de surlignement" title="Couleur de surlignement" onclick="' + this.objectId + '.execCommand(\'BackColor\')"></td>';
        html += '    	   <td class="button"><img src="' + this.path + 'images/textcolor.gif" width="18" height="18" alt="Couleur du texte" title="Couleur du texte" onclick="' + this.objectId + '.execCommand(\'ForeColor\')"></td>';
        html += '    	   <td><div class="separator"></div></td>';
		html += '  		  </tr>';
		html += '		</table>';
		html += '	   	</td>';
		html += '	   </tr>';
		html += '	   <tr>';
		html += '	   	<td>';
		html += '		<table cellspacing="0" cellpadding="0">';
		html += '  		  <tr>';
		html += '    	   <td>';
		html += '    	   <select onchange="' + this.objectId + '.execCommand(\'FormatBlock\', this.value);this.selectedIndex=0;">';
		html += '    	    <option value="">Format</option>';
		html += '    	    <option value="<p>">Paragraphe</option>';
		html += '    	    <option value="<h1>">En-tête 1</option>';
		html += '    	    <option value="<h2>">En-tête 2</option>';
		html += '    	    <option value="<h3>">En-tête 3</option>';
		html += '    	    <option value="<h4>">En-tête 4</option>';
		html += '    	    <option value="<h5>">En-tête 5</option>';
		html += '    	    <option value="<h6>">En-tête 6</option>';
		html += '    	    <option value="<pre>">Pré-formaté</option>';
		html += '    	   </select>';
		html += '    	   </td>';    	      	   
		html += '    	   <td>';
		html += '    	   <select onchange="' + this.objectId + '.execCommand(\'FontName\', this.value);this.selectedIndex=0;">';
		html += '    	    <option value="">Police</option>';
		html += '    	    <option value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif</option>';
		html += '    	    <option value="Times New Roman, Times, serif">Times New Roman, Times, serif</option>';
		html += '    	    <option value="Courier New, Courier, mono">Courier New, Courier, mono</option>';
		html += '    	    <option value="Georgia, Times New Roman, Times, serif">Georgia, Times New Roman, Times, serif</option>';
		html += '    	    <option value="Verdana, Arial, Helvetica, sans-serif">Verdana, Arial, Helvetica, sans-serif</option>';
		html += '    	    <option value="Geneva, Arial, Helvetica, sans-serif">Geneva, Arial, Helvetica, sans-serif</option>';
		html += '    	   </select>';
		html += '    	   </td>';
		html += '    	   <td>';
		html += '    	   <select onchange="' + this.objectId + '.execCommand(\'FontSize\', this.value);this.selectedIndex=0;">';
		html += '    	    <option value="">Taille</option>';
		html += '    	    <option value="1">1 (8 pt)</option>';
		html += '    	    <option value="2">2 (10 pt)</option>';
		html += '    	    <option value="3">3 (12 pt)</option>';
		html += '    	    <option value="4">4 (14 pt)</option>';
		html += '    	    <option value="5">5 (18 pt)</option>';
		html += '    	    <option value="6">6 (24 pt)</option>';
		html += '    	    <option value="7">7 (36 pt)</option>';
		html += '    	   </select>';
		html += '    	   </td>';
		html += '  		  </tr>';
		html += '		</table>';
		html += '	   	</td>';
		html += '	   </tr>';
		html += ' 	   <tr>';
		html += '	  	<td>';
		html += '		 <table cellspacing="0" cellpadding="0">';
		html += '		   <tr>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-cool.gif" width="18" height="18" alt="Cool" title="Cool" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-cool.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-cry.gif" width="18" height="18" alt="Pleure" title="Pleure" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-cry.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-embarassed.gif" width="18" height="18" alt="Embarassé" title="Embarrassé" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-embarassed.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-foot-in-mouth.gif" width="18" height="18" alt="Mange" title="Mange" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-foot-in-mouth.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-frown.gif" width="18" height="18" alt="Déçus" title="Déçus" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-frown.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-innocent.gif" width="18" height="18" alt="Innocent" title="Innocent" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-innocent.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-laughing.gif" width="18" height="18" alt="Plaisante" title="Plaisante" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-laughing.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-money-mouth.gif" width="18" height="18" alt="Cupide" title="Cupide" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-money-mouth.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-kiss.gif" width="18" height="18" alt="Embrasse" title="Embrasse" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-kiss.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-sealed.gif" width="18" height="18" alt="Muet" title="Muet" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-sealed.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-smile.gif" width="18" height="18" alt="Sourit" title="Sourit" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-smile.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-surprised.gif" width="18" height="18" alt="Surpris" title="Surpris" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-surprised.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-tongue-out.gif" width="18" height="18" alt="Grimace" title="Grimace" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-tongue-out.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-undecided.gif" width="18" height="18" alt="Indécis" title="Indécis" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-undecided.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-wink.gif" width="18" height="18" alt="Clin d\'oeil" title="Clin d\'oeil" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-wink.gif\')"></td>';
        html += '		   	<td class="smileys"><img src="' + this.path + 'images/smileys/smiley-yell.gif" width="18" height="18" alt="Aliéné" title="Aliéné" onclick="' + this.objectId + '.execCommand(\'InsertImage\', \'' + this.path + 'images/smileys/smiley-yell.gif\')"></td>';
		html += '		   </tr>';
		html += '		 </table>';
		html += '	  	</td>';
		html += ' 	   </tr>';
		html += '	 </table>';
		html += '	</td>';
		html += '  </tr>';
		html += '  <tr>';
		html += '	<td class="frame"><iframe id="' + this.id + '-frame" style="height:' + this.height + '; width:' + this.width + '"></iframe></td>';
		html += '  </tr>';
        html += '  <tr>';
		html += '   <td class="source"><input id="' + this.id + '-viewSource" type="checkbox" onclick="' + this.objectId + '.toggleSource()"> Source</td>';
		html += '  </tr>';
        html += '</table>';
        return html;
    };

    this.getFrameHtml = function() {
        var html = '';
		html += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
		html += '<html xmlns="http://www.w3.org/1999/xhtml">';
		html += '<head>';
		html += '<meta http-equiv="Content-Type" content="text/html; charset=' + this.charset + '" />';
		html += '<title>Wysiwyg editor</title>';
		if (this.cssFile) { 
		html += '<link rel="stylesheet" type="text/css" href="' + this.cssFile + '">'; 
		}
		html += '<style type="text/css">';
		html += 'html, body {'; 
		html += '	cursor: text;'; 
		html += '}';
		html += 'body {';
		html += '	margin: 0.5em; ';
		html += '	padding: 0;';
		html += '}';
		html += '</style>';
		html += '</head>';
		html += '<body>';
		html += '</body>';
		html += '</html>';
        return html;
    };

    this.execCommand = function(cmd, value) {
		try {
			this.frame.focus();
			if (cmd == 'CreateLink' && !value) {
				var url = prompt('Entrer l\'URL du lien', 'http://');
				if (url) {
					this.frame.document.execCommand('Unlink', false, null);
					if (this.browser.ie) 
						this.frame.document.execCommand(cmd, false, 'wysiwyg://wysiwyg/' + url);
					else if (this.browser.gecko) 
						this.frame.document.execCommand(cmd, false, url);
				}
			} 
			else if (cmd == 'Mail' && !value) {
				var text = prompt('Texte : ', 'E-mail');
				var mail = prompt('Adresse de Messgaerie : ', 'xxxx@xxxx.xxx');
				if(text && mail) {
					self.frame.document.body.innerHTML += '<a href="mailto:' + mail + '">' + text + '</a>';
				}
			} 
			else if (cmd == 'InsertImage' && !value) {
				var imageUrl = prompt('Entrer l\'URL de l\'image : ', 'http://');
				if (imageUrl) {
					this.frame.document.execCommand(cmd, false, imageUrl);
				}
			} 
			else if (cmd == 'BackColor' && !value) {
				var BackColor = prompt('Entrer la couleur Hexadecimal de surlignement : ', '#');
				if (BackColor) {
					this.frame.document.execCommand(cmd, false, BackColor);
				}
			} 
			else if (cmd == 'ForeColor' && !value) {
				var ForeColor = prompt('Entrer la couleur Hexadecimal du texte : ', '#');
				if (ForeColor) {
					this.frame.document.execCommand(cmd, false, ForeColor);
				}
			} 
			else if (cmd == 'Cite' && !value) {
				var author = prompt('Auteur : ', '');
				var cite = prompt('citation : ', '');
				if(author && cite) {
					self.frame.document.body.innerHTML += '<blockquote title="' + author + '">' + cite + '</blockquote>';
				}
			} 
			else if (cmd == 'Acronym' && !value) {
				var acronym = prompt('Acronyme : ', '');
				var definition = prompt('Définition : ', '');
				if(acronym && definition) {
					self.frame.document.body.innerHTML += '<acronym title="' + definition + '">' + acronym + '</acronym>';
				}
			} 
			else {
				this.frame.document.execCommand(cmd, false, value);
			}
			this.frame.focus();
		}
		catch(e) {
			alert(e); 
		}
    };

    this.openWindow = function(url, width, height) {
        var x = (screen.width/2-width/2);
        var y = (screen.height/2-height/2);
        window.open(url, '', 'scrollbars=yes, width=' + width + ', height=' + height + ', screenX=' + (x) + ', screenY=' + y + ', left=' + x + ', top=' + y);
    };

    this.toggleSource = function() {
        var html, text;
        if (this.browser.ie) {
            if (!this.viewSource) {
                html = this.frame.document.body.innerHTML;
                this.frame.document.body.innerText = unlockUrls(html);
                document.getElementById(this.id + '-buttons').style.visibility = 'hidden';
                this.viewSource = true;
            } 
			else {
                text = this.frame.document.body.innerText;
                this.frame.document.body.innerHTML = lockUrls(text);
                document.getElementById(this.id + '-buttons').style.visibility = 'visible';
                this.viewSource = false;
            }
        } 
		else if (this.browser.gecko) {
            if (!this.viewSource) {
                html = document.createTextNode(this.frame.document.body.innerHTML);
                this.frame.document.body.innerHTML = '';
                this.frame.document.body.appendChild(html);
                document.getElementById(this.id + '-buttons').style.visibility = 'hidden';
                this.viewSource = true;
            } 
			else {
                html = this.frame.document.body.ownerDocument.createRange();
                html.selectNodeContents(this.frame.document.body);
                this.frame.document.body.innerHTML = html.toString();
                document.getElementById(this.id + '-buttons').style.visibility = 'visible';
                this.viewSource = false;
            }
        }
        document.getElementById(this.id + '-viewSource').checked = this.viewSource ? 'checked' : '';
        document.getElementById(this.id + '-viewSource').blur();
    };
	
	this.isOn = function() {
        return Boolean(this.frame);
    };

    this.getContent = function() {
        try { 
			return unlockUrls(this.frame.document.body.innerHTML); 
		} 
		catch(e) {
			alert(e); 
		}
    };

    this.submit = function() {
        if (this.isOn()) {
            if (this.viewSource) 
				this.toggleSource(); 
            document.getElementById(this.id).value = this.getContent();
        }
    };
}

Conclusion :


dans le ZIP,

C'est ultra rapide !

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.