<span> vs <p> et création d'un nouveau bouton

[Vince]

Bonjour,
Je travaille sur la mise en place d'un site d'édition (avec Drupal). Je ne suis pas encore fixé sur l'éditeur que je vais choisir. Wymeditor est une solution idéale pour la bonne structuration des contenus. Et le code généré est nickel.
3 pbs cpdt :

1. j'ai besoin de créer des classes pour mettre en forme des éléments du texte (par ex le nom des auteurs cités en petites cap.) à l'intérieur même d'un "container". J'ai dc besoin de produire des balises de type span class="maclasse". Or je ne peux que créer des balises du type p class="maclasse".

2. je souhaite créer un bouton pour baliser le texte surligné ds un container avec la balise <fn> (permet de créer des notes de bas de p avec le module footnotes sous Drupal). Comment procéder pour créer un tel bouton, sur le modèle du bouton strong par ex?

3. la fenêtre de dialogue pour importer des images est vraiment limite. IMCE fonctionne bien avec TinyMCE, mal avec Wymeditor. Est-ce normal?

Merci par avance pour votre aide. J'espère vraiment régler ces 3 pts pour me débarasser pour de bon de TinyMCE!

Vincent

[Al]

jai bien une solution... mais étant donné que je ne suis pas un expert javascript et encore moins Jquery, il y a sans doute moyen de l'améliorer ou de mieux l'écrire...

tu remplaces le code

Code: Select all

Wymeditor.prototype.toggleClass = function(sClass, jqexpr) {
...
}


par

Code: Select all

Wymeditor.prototype.toggleClass = function(sClass, jqexpr) {
       var container = (this._selected_image ? this._selected_image : jQuery(this.selected()));
   

   //le mot selectionné
   if (window.getSelection){ //FF
      sel=this._iframe.contentWindow.getSelection();
   }else{ // IE
      var sel =  this._doc.selection;
      rng = sel.createRange();
      rng.select();
      sel=rng.text;
   }

   // Il n'y a pas de SPAN appliqué sur la selection !
   if (this.selected().tagName!="SPAN" && jqexpr=="span" && sel!=""){
      if (window.getSelection && sel!=""){ //FF
         //alert("843 FF : Attend un Noeud SPAN alors qu'un Noeud P rencontré -- '"+sel+"'");
         this._doc.execCommand("inserthtml", false, "<span class=\""+sClass+"\">"+sel+"</span>");
      }else if(sel!=""){ // IE
         //alert("846 IE : Attend un Noeud SPAN alors qu'un Noeud P rencontré -- '"+sel+"'");
         try {  this._doc.selection.createRange().pasteHTML("<span class=\""+sClass+"\">"+sel+"</span>");} catch (e) { }
      }

   // Un SPAN est déjà appliqué sur la selection
   }else if(this.selected().tagName!="SPAN" && jqexpr=="span"  && sel!="") {
      //alert("852: DELETE SPAN");
      if (window.getSelection){ //FF
         this._doc.execCommand("inserthtml", false, sel);
      }else{//IE
         this.selected().removeNode(true); //Supprime le noeud SPAN, puis remet le texte
         try { this._doc.selection.createRange().pasteHTML(sel);   ok=1;} catch (e) { }
      }
   //Travail sur les P
   }else{
      container = jQuery(container).parentsOrSelf(jqexpr);
      jQuery(container).toggleClass(sClass);
      if(!jQuery(container).attr(WYM_CLASS)) jQuery(container).removeAttr(this._class);
   }
};


puis tu ajoutes dans styles.css

Code: Select all

/* Texte : Important */
.important  /* span */ {
    color: red; font-weight: bold;
    /* color: red; font-weight: bold;  */
}


Pour moi cela fonctione sous IE et FF (PC). Il faut cependant bien sélectionner le texte pour que le noeud soit trouvé...

en partant de cette idée, tu pourras créer des boutons qui générent des SPAN (ex <U> deviendra <span style="text-decoration:underline">...</span>