Forum closed. New forum available at http://community.wymeditor.org/

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

For those who prefer to speak French.

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

Postby Vince on Mon Dec 10, 2007 4:19 pm

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
Vince
 
Posts: 1
Joined: Mon Dec 10, 2007 3:57 pm

Postby Al on Fri Dec 14, 2007 10:58 pm

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>
Al
 
Posts: 4
Joined: Fri Dec 14, 2007 8:32 pm
Location: Orléans (France)


Return to French forum

Who is online

Users browsing this forum: No registered users and 2 guests

cron