Wysiwyg, simple, sans pretention

Soyez le premier à donner votre avis sur cette source.

Vue 27 242 fois - Téléchargée 3 323 fois

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

Ajouter un commentaire Commentaires
Messages postés
3
Date d'inscription
mercredi 12 octobre 2005
Statut
Membre
Dernière intervention
7 janvier 2011

Bonjour, je met un 8 parce que pour une source de 2006, on est en 2012 soit 6 ans après elle reste bien fort utile pour un éditeur léger simple avec pratiquement toutes les fonctions de bases, quand d'autres aussi léger ou plus lourd on moins de fonctions.

Bon puis j'oubliais, je met même 9/10 parce que ce code est visionnaire lol ckeditor et tiny mce passe pas sur tablette android, alors que se petit wysiwyg passe très bien.

Par contre j'ai enlevé une étoile parce que je galère et je n'arrive pas à le faire tourner, pas même en me basant de la page test. Dans head j'ai bien mis les appels, dans body j'ai rajouter la page.index à fonction, j'ai bien mis en dessous le code script, mais non, quand je valide, mon contenu reste pareil et je n'ai aucunes modifications de faites.

Qui peut m'aider à ce qu'il valide les modifications ?
MErci par avance pour votre aide.
Messages postés
63
Date d'inscription
lundi 7 juin 2004
Statut
Membre
Dernière intervention
16 mai 2009

Bonne utilisation de la spécification Midas, il est vrai qu'il est compliqué de fonctionner, tant que le fabriquant de navigateur intégre la norme ISO 8601 de javascript.

Perso, je te mets un 10/10.
Messages postés
29
Date d'inscription
mercredi 14 juin 2006
Statut
Membre
Dernière intervention
6 février 2009

Un grand merci pour ta source, qui me sera très utile pour étudier le fonctionnement des éditeurs WYSIWYG. Dommage qu'il ne soit pas possible d'uploader des images sur le serveur, ni de créer des tableaux avec.

Mais rien n'est parfait ;)
Messages postés
3
Date d'inscription
samedi 9 octobre 2004
Statut
Membre
Dernière intervention
24 mai 2009

Salut lecteurs,

Merci hametsu21 pour ce code, que je n'ai pas encore essayé, et que je compte lire et tenter de comprendre avant...

Merci FabriceD72 pour avoir débuggé et surtout avoir suspendu cette polémique!

J'ai recopier le code (-: avec Konqueror qui n'est pas en cause...) et je constate que les lignes 52 à 59 sont pleines de vide(s)! La visite iniiale c'est faire en firefox qui montre bien ces lignes "blanches", également. Je n'ai pas ce qu'il faut pour décompresser les ".zip" fourni par le site.

Quelqu'un qui aurait fait tourner le source (l'auteur, ou FabriceD72!) pourrait-il nous les placer ici ?

La ligne "(buttons[i].id)" ne doit probablement pas générer d'erreur, mais ne doit pas faire grand'chose non plus... Quoi qu'il en soit, chercher à comprendre une source réputée fonctionnelle est tout de même philosophiquement plus confortable :-)

Bon courage à chacun
Messages postés
1
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
27 décembre 2008

J'ai réussi à faire fonctionner ce code sous IE7 en intervertissant 3 lignes de code :

var wysiwyg = document.createElement('div');
wysiwyg.id = this.id + '-wysiwyg';
wysiwyg.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();

document.getElementById(this.id).parentNode.replaceChild(wysiwyg, document.getElementById(this.id));

Le remplacement du noeud est réalisé après l'instruction innerHTML et non avant.

Il ne faut pas non plus que le nom de la zone de saisie en HTML (paramètre id) soit identique au nom de la variable Javascript utilisé pour désigner la frame HTML équivalente (paramètre ObjectId).

Le fonctionnement sous IE n'est pas génial, notamment pour l'ajout de smileys, mais ca fonctionne.
Afficher les 50 commentaires

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.