Accueil > > > WYSIWYG, SIMPLE, SANS PRETENTION
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 !
Historique
Sources de la même categorie
Commentaires et avis
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 <
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 <font color...><p...>.... 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 à créer un formulaire avec fckeditor mais en utilisant plusieurs champs mais avec
Textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
HTML - entites numeriques [ par unionx ]
salut a tous je sais pas ou je vais posé mon question :( , j'ai besoin d'aide. bon je vais dire mon probleme directement je utiise webexpert comme
|
Derniers Blogs
SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|