Un petit editeur WYSIWYG maison

matmat a écrit :
Cela fait longtemp que je cherche des solutions d'editeur WYSIWYG js sympa, j'en ai essayé pas mal, mais la pluspart je les trouve soit trop lourds, soit buggés. Ça ne m'a pas empeché de les utiliser.

J'ai donc essayé d'en faire un, pour limiter les dégats, j'ai décidé d'utiliser uniquement la méthode execCommand compatibles sur les differents navigateurs.

a écrit :
Sinon, j'ai seulement testé sur FF(version 2.0.0.8), tout à l'air de rouler à part le petit encart déroulant des couleurs qui a l'air de disparaître difficilement dès qu'on en a plus besoin.

a écrit :
Sinon, ben, c'est bien de vouloir faire cet outil, mais faudrait aussi m'expliquer en quoi il est réellement utile car on a pas la possibilité de mettre du css dans un fichier externe, ce qui nous oblige à utiliser uniquement les span, dommage.

function get_xhtml(node) {

var text = '';
var children = node.childNodes;
var child_length = children.length;
var tag_name;

   for (I=0;I<child_length;I++) {
      var child = children[I];

      switch (child.nodeType) {
         case 1: { 

            var tag_name = String(child.tagName).toLowerCase();
            text += '\n<'+tag_name;

            var attr = child.attributes;
            var attr_length = attr.length;
            var attr_value;

            var is_alt_attr = false;

            for (j=0;j<attr_length;j++) {

               var attr_name = attr[j].nodeName.toLowerCase();

               if (!attr[j].specified && (attr_name != 'style' || child.style.cssText == '')) continue;

               if (attr_name == '_moz_dirty' || 
               attr_name == '_moz_resizing' ||
               tag_name == 'br' && attr_name == 'type' &&
               child.getAttribute('type') == '_moz') continue;

               var valid_attr = true;

               if (attr_name == "style") attr_value = child.style.cssText;
               if (attr_name == "class") attr_value = child.style.cssText;
               if (attr_name == 'alt') is_alt_attr = true;
               if (attr_name == "face"){
                  var font = child.getAttribute(attr_name, 2);
                  attr_name = 'style';
                  attr_value = 'font-family:'+font;
               }

               text += ' '+attr_name+'="'+fix_attribute(attr_value)+'"';

               if (attr_name == 'alt') is_alt_attr = true;
          }

         if (tag_name == 'img' && !is_alt_attr)text += ' alt=""';
					          
         if (child.canHaveChildren || child.hasChildNodes()){
            text += '>';
            text += get_xhtml(child, lang, encoding, true, inside_pre||tag_name=='pre'?true:false);
            text += '</'+tag_name+'>\n';
	}else{
            text += ' />';
        }

	break;
        }
        case 3: { //TEXT_NODE
           text += child.nodeValue;
           break;
       }
	default:
        break;
     }
   }
   return text;
}


function fix_attribute(text) {
	return String(text).replace(/\&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
}