begin process at 2010 03 19 20:06:23
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > WYSIWYG, SIMPLE, SANS PRETENTION

WYSIWYG, SIMPLE, SANS PRETENTION


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :20 322 / 2 818
Auteur : hametsu21

Ecrire un message privé
Site perso
Commentaire sur cette source (47)
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 mars 2006 16:39:57 :

 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

UN PETIT GENERATEUR HTML SIMPLE par carate
Source avec Zip EDITEUR BBCODE AVEC VISUALISATION EN DIRECT par Vince_02
Source avec Zip Source avec une capture EDITEUR HTML (WYSIWYG) CODÉ EN JAVASCRIPT ORIENTÉ OBJET par Airbornes
Source avec Zip EDITEUR WYSIWYG DANS UNE PAGE WEB ! par glork
Source avec Zip EDITEUR WYSIWYG par alain34

Commentaires et avis

Commentaire de hametsu21 le 18/03/2006 10:34:44

vues 72 fois sans aucun commentaire...
Rien à redire ?

Commentaire de bultez le 18/03/2006 15:58:31

>>un petit editeur wysiwyg que j'essaye de mettre en place grâce à execCommand()
il y en a déjà quelques uns, qui utilisent cette commande et qui fonctionnent
>>j'envisage de faire aussi de la coloration de code grâce aux xmlhttprequest
>>et de nettoyer le code html en xhtml
ceux dont je parle au dessus font ça tout en javascript
sans aucun échange avec le serveur ( ce qui est mieux je trouve )
>>vu 109 fois (quand je regarde) sans aucun commentaire...Rien à redire ?
difficile d'aider ou de faire une critique,
bien entendu positive, sans source, ni zip.

Commentaire de hametsu21 le 18/03/2006 16:28:37

Il y a un ZIP, je poste la source, oui mais il est toujours bon d'avoir plusieurs exemples ou emploies d'un même élément afin de comprendre et savoir réutiliser.
Netoyage du code en javascript aussi.
Coloration en javascript ?? je ne connais pas , t'as un exemple ?
A+ merci de ta réponse ;)

Commentaire de bultez le 18/03/2006 16:44:10

pour la couleur fond/texte : execCommand aussi.
ben oui, il y a un .zip... curieux je n'en voyais
pas la liste des composants.
un exemple ? je dois donc citer le mien :
http://www.javascriptfr.com/codes/MISE-FORME-TEXTE-SAISIE-WYSIWYG_32583.aspx
mais il y en a d'autres.

Commentaire de hametsu21 le 18/03/2006 17:10:08

Coloration synthaxique de code et non de texte, j'aurai du préciser.
Je crois qu'on s'est mal compris.

Commentaire de hametsu21 le 18/03/2006 17:12:14

Et aussi, moi il est applicable partout, toi c'est ton fichier qui contient tout, t'imagine si je voulais fair de chaque textarea un editeur wysiwyg alord que moi :

<fieldset>
<legend>Poster votre texte ici :</legend>
<form action="" method="post">
<p>
<textarea id="text" name="body" cols="60" rows="10">
&lt;h1&gt;Heading One&lt;/h1&gt; &lt;h2 style="margin-right: 0px;" dir="ltr"&gt;Heading Two&lt;/h2&gt; &lt;h3&gt;Heading Three&lt;/h3&gt; &lt;pre&gt;Preformatted &lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt; &lt;span style="text-decoration: underline;"&gt;underline&lt;/span&gt; &lt;a href="test2.php"&gt;test&lt;/a&gt; test&lt;br&gt;&lt;/pre&gt; &lt;p&gt;Paragraph&lt;/p&gt; &lt;p style="margin-right: 0px; text-align: left;" dir="ltr"&gt;Normal &lt;/p&gt; &lt;ul&gt; &lt;li&gt;List 1&lt;/li&gt;&lt;li&gt;List 2&lt;/li&gt;&lt;li&gt;List 3&lt;/li&gt; &lt;/ul&gt; &lt;ol&gt; &lt;li&gt;Ordered List&lt;/li&gt;&lt;li&gt;Ordered List&lt;/li&gt;&lt;li&gt;Ordered List&lt;/li&gt;&lt;li&gt;Ordered List&lt;/li&gt; &lt;/ol&gt;
</textarea>
</p>
<p>
<input type="submit" value="submit" onclick="wysiwyg.submit();">
</p>
</form>
</fieldset>
<!-- A TOUJOURS PLACER APRES LE FORMULAIRE -->
<script type="text/javascript">
var wysiwyg = new Wysiwyg("text", "wysiwyg");
wysiwyg.init();
</script>

Suffit...

Commentaire de bultez le 19/03/2006 08:39:35

>>>Coloration synthaxique de code
ah !!! ce n'est pas comparable alors...
et ça, ça m'intéresse...
tu devrais changer le titre :
des scripts de coloration syntaxique
il n'y en à pas beaucoup je crois !
@+

Commentaire de hametsu21 le 19/03/2006 09:38:00

Sur http://www.codes-php.net/source-24--editeur-wysiwyg-avec-coloration-syntaxique.php
y'en a justement, le code est insérer dans un pop-up puis le code coloré insérer dans le textarea coloré sans rechargement grâce aux xmlhttprequest.

Mon problème pour reproduire ceci, c'est de ne pas savoir récupérer la valeur envoyé d'un po-pup :D

j'aimerai bien intégrer GeShi...

Commentaire de coucou747 le 20/03/2006 19:08:53

celui d'antho est à base d'expressions régulières, et je n'ai jamais compris pourquoi il n'a pas voulu mettre ça en javascript car c'est super simple à transformer après (les pregs sont quasiments compatibles...)

Commentaire de Anthomicro le 10/04/2006 11:40:31

Salut à tous :-)

Je tombe par hasard sur cette source suite à une recherche dans google sur les pages parlant de codes-php. Bref pour ce qui est de PHP, j'ai choisi ça car je souhaitais le moins de code javascript possible pour un éditeur comme ça, car généralement ça devient vite le bronx. Le mien est encore perfectible de toute façon, le + foire encore (comme sur mon chat d'ailleurs) et un escape n'y change rien, bref je verrai quand j'aurais le temps.

a +

Commentaire de guart le 04/05/2006 09:53:34

je trouve ce script formidable mais j'ai un petit souci :
Comment on fait pour enlever le text par défaut .?? merci d'avance

Commentaire de pyxel le 24/05/2006 11:57:27

Bonjour,
Ce script me semble interessant (leger et simple). Je l'ai chargé et j'essaie de tester en l'etat sous IE6, mais en vain ?? "erreur ...". Il me manque peut etre un detail??. Peux tu m'indiquer un site ou il est possible de le voir fonctionner en reel.
merci et felicitation pour l'oeuvre realisée.
Pyxel

Commentaire de TheChikenKiller le 24/05/2006 19:08:00

Bonjour. Ce code est très bien et j'aimerai m'en servir pour mon blog (je vous citerai comme créateur ;)), cependant je n'arrive pas à récuperer le source obtenu pour le mettre dans ma base de donnée. J'utilise la methode post vers un fichier php. ce fichier php récupere très bien le titre et le theme (que j'ai rajouté en inputs text) mais ne récupère pas le contenu !

Commentaire de jg4228 le 08/08/2006 19:12:12

Ce code me semble bien, mais ça plante avec IE ou MAXTHON à la ligne 40 :
                             *********
wysiwyg.innerHTML = this.editorHtml ? this.editorHtml : this.getEditorHtml();

apparemment wysiwyg.innerHTML = valeur, ça ne lui plaît pas.

à plus pour continuer le test.....

Commentaire de Guidelor le 17/08/2006 21:38:46

" SIMPLE , SANS PRETENTION " ??????

Moi ki esperait tomber sur un editeur simple a comprendre et facilement modifiable...

Ca fait quand meme 400 lignes de codes et c'est du niveau initié...

Commentaire de speedylol le 02/09/2006 18:35:21

bonjour,

comment installé cela, moi cela ne passe pas la premiere ligne du script javascript pour inseré directement dans une base de donnée pour des événement.

voilà cela que je note dans ma ligne

<textarea id="text" name="description" cols="60" rows="10">$description</textarea>

quelqu'un serais m'aidée svp????

Commentaire de muller06 le 01/10/2006 08:29:10

Le code du zip (test.html...) plante sous IE6 (erreur inconnue) mais fonctionne sous Mozilla.
Quelqu'un a t'il la solution ?

Merci

André

Commentaire de Shadow_Membre le 21/12/2006 00:04:09

Oui apparament l'aplication ne marche pas sur IE, en tt cas, un très bon programme, et y'as du temps perdu, ca merite quand même un 10.
Bonne continuation pr le reste.

A+

Commentaire de fabscanta le 05/02/2007 22:14:19

C'est un superbe éditeur. Apparement, la balise <p>...</p> fait planter le truc sous IE7, je pense que ça pourrait aider pas mal de monde. Par contre, sur une installation sur un osCommerce, il y a un bug encore plus vicieux (toujours sous IE7)... et là, je n'ai pas encore trouvé la soltuion...Est-ce que ç vient du wysiwyg? de IE7 ? ou de osCommerce ?

Commentaire de redpist le 14/04/2007 13:57:02

Bonjour, franchement un des codes le mieux que j'ai trouvé en éditeur WYSIWYG en js et sûrement le plus propre .

Commentaire de Bilou972 le 24/04/2007 06:57:37

C'est un commentaire laissé sur ton source qui m'a fait remarquer qu'il ne fonctionne pas sous IE(je n'utilise pas du tout ce browser). C'est bien dommage car IE est utilisé par la majorité des internautes.
Si tu vois nos messages essaie de corriger ce bug, ton wysiwyg n'en sera que meilleur.
Il est effectivement très propre, malheureusement, dénué de commentaires. Je n'ai pa compris pourquoi tu as mis les icones dans un tableau, et pourquoi ce tableau est généré par le javascript.
Ce sont des critiques constructives, le code reste très bon.

Commentaire de gilloots le 08/12/2007 18:57:35

Quelqu'un as la solution pour le faire marcher sous IE?

Commentaire de taxidogkiller le 30/01/2008 18:06:50 10/10

C'est vraiment un tres bon éditeur WYSIWYG !
Sinon je voulais savoir ! si je souhaite mettre plusieur text-box WYSIWYG sur une meme page est-ce possible ?

Commentaire de taxidogkiller le 30/01/2008 18:11:25

Désolé finalement j'ai trouvé ^^ ... il suffit de donner un autre nom à la variable !


<script type="text/javascript">
var wysiwyg = new Wysiwyg("text1", "wysiwyg");
wysiwyg.init();

var wysiwyg2 = new Wysiwyg("text2", "wysiwyg2");
wysiwyg2.init();

</script>

Commentaire de soundpanther le 17/04/2008 14:02:44

Bonjour,

une J'ai une erreur sur expl.. ?

Merci quand meme

Commentaire de 666merlin le 05/07/2008 19:46:05 1/10

ca ne marche pas sous ie, donc 0/20
dommage...

Commentaire de coucou747 le 06/07/2008 02:43:54

666merlin, tu devrais tester et dire ce qui ne marche pas, plutot que de juger injustement comme ca...

Commentaire de 666merlin le 07/07/2008 17:34:14

C'est pas injuste, ça ne marche pas sous ie donc c'est mérité. Faut pas sortir de saint cyr pour installer les deux navigateurs et faire des tests ! Je suis même étonné que quelqu'un ose proposer un truc qui ne fonctionne pas sur le navigateur le plus utilisé au monde... lol (surtout quand on vois le nombre de bugs et d'intolérances qu'il y a dans Firefox).
Mais bon, j'avoue que je suis un peu énervé par tous ces #@!? qui ne savent pas programmer et mettent la faute sur le dos d'IE plutôt que de réfléchir 2 secondes... le pire est de voir des sites qui osent dire "ce site ne fonctionne pas sous IE", le mec dirait simplement "site réalisé par un incompétent" ce serait pareil. Mais bon, c'est un autre débat.
Voilà que je vais passer pour un méchant... ;-)
Mais bon, c'est un début de la part de l'auteur, reste plus qu'a trouver quelqu'un qui débogue son script ou aller trouver un autre script utilisable, car là ça ne sert à rien...

Commentaire de guart le 07/07/2008 17:46:20

bugs et d'intolérances qu'il y a dans Firefox -> LOL

IE interprêtent mal les CSS et respecte pas la W3C, du coup, les sites qui fonctionnent pas sous IE sont les site montés proprement et respecteusement des régles établies par le consortium. C'est relou de devoir se plier aux régles de crosoft sous prétexte que le navigateur à été développé avec des moufles, et qu'ils veulent pas respecter les rêgles.
"Mais bon, c'est un début de la part de l'auteur, reste plus qu'a trouver quelqu'un qui débogue son script ou aller trouver un autre script utilisable, car là ça ne sert à rien" -> Pourquoi tu le déboggerais pas toi ?
Puisque tu jouis IE...

Commentaire de coucou747 le 07/07/2008 17:50:03

j'ai pas msie sur mon laptop, j'ai pas windows non plus... mon pc fixe a crame, mon pc portable n'est pas assez puissant pour faire tourner windows XP, et maintenant, sous 2000, on a plus rien cote outils microsoft, alors, je fais comment moi ?

de plus, beaucoup ici font ca pour leur plaisir, reserver ca a firefox n'est donc pas exclu... on fait ce qu'on veut, le but n'est pas forcement de TE faire plaisir... t'as pas a noter un parce-que ca ne marche pas sur ton navigateur prefere...

je ne vais pas t'insulter parce-que ce que tu fais ne marche pas sur KHTML, alors que c'est un des moteurs les plus respecteux des standards, alors ne vient pas faire chier ceux qui n'en ont rien a faire de MSIE, c'est juste une question du respect du travail des autres...

ensuite, tu notes une source qui a plusieurs annees, si ca se trouve, elle tournait sous MSIE 6 ?

Commentaire de 666merlin le 07/07/2008 18:25:49

Guart : "C'est relou de devoir se plier aux régles de crosoft sous prétexte que le navigateur à été développé avec des moufles"

-> Ce qui est vraiment relou c'est que nous, programmeurs, nous ne sommes pas là pour critiquer la conception d'un navigateur ou d'un autre, ou alors fais toi politicien. Si on est un bon programmeur intelligent, tout simplement, on s'adapte ! T'en a rien à faire qu'IE soit bon ou pas, c'est le plus connu au monde donc tu te plie aux exigences de microsoft et voilà. Quand tu aura une boite qui sera plus grosse que microsoft tu pourra t'amuser à faire de la politique et faire un autre navigateur.


Guart : "Pourquoi tu le déboggerais pas toi ?"

-> Car pourquoi perdre du temps à débogguer ce script alors qu'il y en a d'autres qui fonctionnent sur tous les navigateurs ?

Coucou747 : "j'ai pas msie sur mon laptop, j'ai pas windows non plus... mon pc fixe a crame, mon pc portable n'est pas assez puissant pour faire tourner windows XP, et maintenant, sous 2000, on a plus rien cote outils microsoft, alors, je fais comment moi ?"

-> Et bien, avec tout le respect que je te dois, dans ce cas change de métier ou fait autre chose que de l'informatique... lol. Quand on a pas de voiture on ne se prétend pas coureur automobile, et bien c'est pareil.

Coucou747 : "je ne vais pas t'insulter parce-que ce que tu fais ne marche pas sur KHTML, alors que c'est un des moteurs les plus respecteux des standards, alors ne vient pas faire chier ceux qui n'en ont rien a faire de MSIE"

-> Je n'insulte personne, mais je dis clairement ce que je pense, seuls les gens pro ou anti quelque chose, bref ceux qui préfèrent la politique à la programmation, se sentirons offusqués. Pour ma part, j'ai trouvé autant de bugs sur IE que sur FF, mais au moins quand je fait quelque chose ça marche sur les deux. Et je ne suis pas du style, contrairement à certains, à cracher dans la soupe. IE fonctionne dans des millions de foyers et ma réflexion de base, c'est tout simplement que de mettre un script qui ne fonctionne pas sur IE dans un site est une grave erreur que seuls les gens ouverts d'esprit pourront comprendre. Mais bien entendu, si c'est pour mettre à un endroit que nous sommes seuls à voir et qu'on n'a rien d'autre que FF, alors il n'y a aucun problème.

Coucou747 : "tu notes une source qui a plusieurs années, si ça se trouve, elle tournait sous MSIE 6 ?"

-> si ça se trouve, lol ! Ma note était principalement là pour attirer l'attention des programmeurs sur le fait qu'il faut programmer pour tous les navigateurs, surtout quand on a envie de faire quelque chose qui soit vu sur un site internet public.


PS. Pour info : fck editor est un produit gratuit qui fonctionne sur tous les navigateurs et qui est super complet.

Commentaire de coucou747 le 07/07/2008 18:32:39

je fais du javascript pour le plaisir, c'est pas mon metier... par contre, je fais beaucoup de js, donc je peux en parler... t'es pas sur http://microsoft-javascript.com ici, t'es sur javascriptfr, alors merci de respecter les utilisateurs linuxois.

tu mets un 1/10 a un mec qui code sous linux, juste parce-que ca ne marche pas sous msie, c'est lamentable...

Commentaire de 666merlin le 07/07/2008 18:45:12

>> Imagine :
Tu achètes une nouvelle voiture neuve, une belle sportive bien puissante et avec plein d'options prometteuses. Tout content de ta nouvelle acquisition, tu t'en va sur la route, puis, quand tu arrives sur l'autoroute elle se bloque à 90 km/h laissant ainsi les autres voitures plus modestes te dépasser comme un escargot...
Alors tu vas voir le garage qui te dit : "ben, nous n'avons pas d'autoroute dans notre usine, donc on ne peut pas fabriquer une voiture qui dépasse les 90".

Alors ? Combien tu la note ta voiture ? 10/10 ? lol

>> Si tu n'as pas compris l'analogie :
La voiture prometteuse et avec plein d'options c'est le script qui semble pas mal et avec une super note et annoncé comme super.
La limitation à 90km/h c'est le fait que ça ne marche pas sur IE, normal, lui non plus n'a pas pu le tester, comme le garage...

Commentaire de coucou747 le 07/07/2008 18:50:58

tu payes un garage, pas une source.

vu comment tu notes, on pourrait mettre 0 sur toutes les sources... motif : c'est pas parfait, je suis decu.

genre : "je voulais ajouter un truc, mais c'etait pas concu pour, donc c'est nul"

Commentaire de 666merlin le 07/07/2008 18:52:59

mais je pense que tu trouves normal également d'acheter une télévision et quand, six mois plus tard, deux nouvelles chaines arrivent, tu ne puisse pas les regarder. Ben oui, elles n'ont pas étés testés par le fabricant ou encore que, comme l'émission n'est pas standard, admettons avec quelques améliorations de plus que les autres chaines, ta télévision ne la supporte pas alors que toutes les autres télés fonctionnent correctement. Tu la notera 10/10 bien sur, elle respecte le standard au moins, c'est cool... et quand, 2 ans plus tard il y aura encore 3 nouvelles chaines super cool mais pas standards, qui sortirons, tu te félicitera d'avoir une télévision qui respecte les standards... bravo... 10/10....

Commentaire de 666merlin le 07/07/2008 18:58:59

si tu parles de gratuit, facile de refaire une autre analogie : on te donne gratos la télé qui respecte les standards (mais aussi intolérante que FF, donc pas de chaine qui n'est pas à la norme), alors là tu vas être content ! Génial !
Et tous tes potes et famille auront des télés qui affichent ces 5 nouvelles super chaines... mais pas standards... honte à eux, n'est-ce pas ?
Toujours 10/10 pour ta télé... bravo !

Commentaire de Bilou972 le 07/07/2008 19:02:30

Tu racontes des cracks : IE est intolérant, pas FF

Commentaire de 666merlin le 07/07/2008 19:04:37

ps. Je te suggère de mesurer la tension électrique de ta prise de courant. Le standard c'est 220 volts. Donc si c'est différent, envoi une lettre à EDF pour résilier ton abonnement jusqu'à ce qu'il te propose une fourniture électrique standardisée.

Autre possibilité, achète une alimentation pour ton ordinateur (appelons là Firefox power) qui ne tolère que 220 volts précisément car c'est le standard. Et si la tension n'est pas de 220 volts ou qu'il y a une fourniture électrique stable et standard elle s'arrête... Bravo, 10/10 pour l'alim...

Commentaire de Bilou972 le 07/07/2008 19:05:57

Arretes tes exemples bidons. Va programmer au lieu de laisser des commentaires stériles sur les sources des autres.

Commentaire de 666merlin le 07/07/2008 19:07:26

Faux, FF est réputé pour ne respecter que ce qui est standard W3C, alors qu'IE s'en tape de la norme, il affiche n'importe quoi du moment qu'il comprend. Essayes par exemple de ne pas faire standard avec un style "width:100" en oubliant de respecter le standard de mettre un px derrière... FF marche ? bien sur que non
et des exemples comme ça il y en a des milliers

Commentaire de coucou747 le 07/07/2008 19:17:54

bon...
"fck editor est un produit gratuit qui fonctionne sur tous les navigateurs et qui est super complet"

ok mais il n'edite pas les partitions de musique, donc je mets 1/10.

il ne passe pas sous lynx, donc je mets 1/10

son code est atroce donc je mets 1/10

tu ne t'es jamais dit que ce code avait ete fait pour etre comprehensible par un debutant, pour montrer le principe des wysiwygs ? ou meme qu'il avait pu etre fait pour consolider les conaissances de l'auteur ?

et ca merite vraiment 1/10 ?

Commentaire de 666merlin le 07/07/2008 19:38:39

contrairement à ce que tu penses, je respecterai ton avis si tu pensais que fck editor valait 1/10, car mon principe, tu devrais l'avoir compris, c'est que tu note comme tu le sent, après tout c'est le principe de la démocratie et loin de moi l'idée de vouloir t'imposer une note ou une autre. Pour ma part et objectivement, j'aurais mis 7/10 à fck principalement à cause du code et aussi des popup (contrarement à tiny mce qui fait de fausses popups non interceptés par les divers bloqueurs installés par les gens).

Par ailleurs, je reconnais l'aspect éducatif d'une telle source, et j'en félicite l'auteur. Idem pour consolider son expérience.

Ma note est principalement due à une raison d'incompatibilité car inutilisable en ligne sur le site public de quelqu'un. Je pensais que les notes étaient libres, qu'on pouvais dire ce qu'on pensais...
Donc, si je devais préciser mes notes (avis perso) :
- aspect éducatif : 7/10
- optimisation du code : 5/10
- code utilisable sur un site : 0/10

Peut être que ce site pourrai imaginer un système de notation plus détaillée... peut être une idée pour eux... comme un logo indiquant la compatibilité des navigateurs, ce serais cool pour trouve d'un coup d'oeil celui qui nous correspond ou les meilleurs qui s'adaptent à tous.

Mais bon, je mettais juste l'accent sur le fait qu'il ne faut pas dénigrer un navigateur ou un autre, nous sommes des programmeurs, laissons la politique aux politiques et adaptons nous, tout simplement. ;-)

Commentaire de coucou747 le 07/07/2008 19:51:54

le truc, si tu veux, c'est que la, tu passes pour un pompeur de code qui ne s'interesse pas a la source, mais qui ne fait que saquer : "bah oui, jpeux pas pomper directement, je dois debug avant"

super...

ici, t'es sur codes-sources, on va plus loin que la portabilite pour juger un code...

Commentaire de 666merlin le 07/07/2008 20:24:39

oui.. je vois... on favorise la création de code mono navigateur... lol

En fait, je n'aime pas pomper les codes des non pros car ils ne me conviennent généralement pas, j'y cherche juste parfois des idées ou des exemples, mais quand ça ne fonctionne pas, je ne vois pas l'aspect éducatif... car à quoi ça sert d'apprendre à programmer mal...

Mais bon, chacun son truc... je vois qu'on ne juge pas les choses sur les mêmes critères, perso je n'aime pas avoir des oeillères et ne regarder que ce qui est bon en oubliant le reste. Je regarde l'ensemble et le résultat final. Comme te le dirait un prof de math, peut importe la qualité de ta résolution d'équation, si le résultat est mauvais, c'est zéro.

Bref, je vois encore une fois que l'exigence, la rigueur, le bon sens et l'effort sont en perdition... Maintenant on se contente de la médiocrité du moment qu'on ne se foule pas trop... On parle de respect des standards plutôt que de programmer un truc qui s'adapte intelligemment à toutes les situations, on parle d'aspect éducatif quand ça ne fonctionne pas, on parle de moufles et on critique bêtement alors qu'on n'est pas capable d'en faire autant, on essayes d'imposer ses idées presque par la force quand on rencontre quelqu'un qui n'est pas d'accord, on dit qu'on se fait saquer quand on reçois une critique, etc... de là à ce qu'on ne bosse plus que 35h.... il n'y a qu'un pas... ha ? ça c'est déjà fait ?... bon... alors c'est le début de la fin...

Commentaire de fabscanta le 07/07/2008 20:44:36

Hey, tout le monde.
Je n'ai pas trop suivi votre discours...
Cependant, j'ai mis un post le 05/02/2007 au sujet d'une balise <br/> qui traine dans la page de test... Si vous la faites sauter (et quand je dis "sauter", ça n'a rien de vulgaire), le script fonctionne. En tout cas, sur ma config (de base MS+IE).
Comme vous êtes de bon programmeur, vous ne mettez plus de <br/> dans votre sémantique...
Je vous demande de faire le test... Et si ça fonctionne, prenez la peine de confirmer, ça aidera les prochains.
Ciao.

Commentaire de FabriceD72 le 27/12/2008 21:29:02 10/10

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

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

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

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

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

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

Commentaire de pserru le 07/05/2009 19:04:40

      Salut lecteurs,

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

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

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

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

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

      Bon courage à chacun

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Editeur WYSIWYG - Ajouter du HTML à l'iframe [ par Tilix ] Salut, J'ai pris un petit editeur wysiwyg sur internet (Source : http://www.ibilab.net/webdev/exemples/editeur-wysiwyg.htm) Et je voudrais ajouter Recuperation WYSIWYG -> HTML [ par maesius ] Bonjour,Voila g mis en place un petit editeur en JavaSript, qui a priori fonctinne correctement mais je n'arrive pas a recuperer le code HTML de facon Editeur wysiwyg [ par baborge77 ] Bonsoir, Super... ton Editeur wysiwyg.... http://www.javascriptfr.com/code.aspx?ID=33746 c'est exactement se dont j'avais besoin < Fonctionnement d'un wysiwyg [ par mael94420 ] Bonjour, Dans le but de réaliser un wysiwyg personnel, j'aimerais savoir comment fait fckEditor (ou un autre wysiwug) pour afficher le texte formaté Editeur HTML [ par Jeuls ] Salut à tous,Avant tout :) J'ai lu le reglement et ait bien remarqué que l'on ne doit pas demander de programme tout fait mais c'est pourtant ce dont utiliser editeur html de extJS dans un formulaire [ par xlight ] salut a tous,Alors voila, je cherche à inclure dans un  champ de mon formulaire l'editeur html que fourni extjs.Cependant, même en ayant épluché l'API Ouvrir un Editeur wysiwyg GRATUIT dans popup & OFFLINE [ par artus ] Bonjour.J'ai reussi a trouver une Source Éditeur Wysiwyg Gratuit PAS MAL, complet mais online.Il y a t-il quelqu'un qui peut en faire un editeur OFFL editeur html pb de balise ki apparait plusieur fois [ par sticky97 ] salut,g fais un editeur html en wysiwyg... g rajouter du javascript pour faire lebalise &lt;font color...&gt;&lt;p...&gt;.... et je voudrai ke le prog Mini Editeur Html [ par zemele ] Bonjour, Cela fait un bon moment que je cherche le moyen de formater un texte que l'on saisi dans une page web (du type celui de ce forum). Je voudra Editeur fckeditor [ par titi4659 ] Bonjour,Je souhaiterai savoir si quelqu'un pouvait m'aider &#224; cr&#233;er un formulaire avec fckeditor mais en utilisant plusieurs champs mais avec


Nos sponsors


Sondage...

Comparez les prix


HTC Magic
Entre 429€ et 429€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo Village du Lot et Garonne, Saint FrontPhoto en route pour l'océan...
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)