Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

WYSIWYG, SIMPLE, SANS PRETENTION


Information sur la source

Catégorie :Formulaire Classé sous : wysiwyg, editeur, html, fckeditor, tynimce Niveau : Initié Date de création : 17/03/2006 Date de mise à jour : 18/03/2006 16:39:57 Vu / téléchargé: 17 336 / 2 549

Note :
7,83 / 10 - par 12 personnes
7,83 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (46)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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

  • 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();
  • }
  • };
  • }
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 !
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !