|
Trouver une ressource
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
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
- 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 !
|