retours d'expériences, codes sources, réflexions, humeurs... d'un webmaster

Comme vous le savez peut-être, wymeditor est un éditeur XHTML strict écrit en jQuery. Et comme vous le savez très certainement, le XHTML strict n'accepte pas l'attribut target des liens.
Alors comment faire pour ouvrir une page externe sur un lien XHTML strict ? Et bien tout simplement en associant une action javascript sur l'évenement click (en jQuery). Et si on ne veut pas ouvrir une nouvelle fenêtre sur tous les liens, il faut ajouter (par exemple) l'attribut "class=external" pour identifier les liens externes.

Dans cet exemple, on va modifier la fenêtre d'ajout de lien et y mettre une case à cocher "lien externe".
La fenêtre passera donc de cette forme :

A celle ci :


Pour cela, on va modifier le fichier source du plugin wymeditor : jquery.wymeditor.js, notamment la méthode WYMeditor.INIT_DIALOG, et ajouter les lignes suivantes :
pour modifier l'aspect de la fenêtre dialogLinkHtml et ajouter le checkbox lien externe :

+ "<div class='row'>
+ "<label>{External}</label>"
+ "<input type='checkbox' class='wym_external' />
+ "</div>"

pour prendre en compte le checkbox lors de la validation :

if (jQuery(wym._options.externalSelector).is(":checked")) 
     var aclass = "external";
else aclass = "";

puis

jQuery("a[href=" + sStamp + "]", wym._doc.body)
     .attr(WYMeditor.HREF, sUrl)
     .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector).val())
     .attr(WYMeditor.CLASS, aclass);

D'autre petites modifications sont à ajouter, comme par exemple l'initialisation de quelques constantes, sans oublier bien sur l'ajout du libellé dans le tableau WYMeditor.STRINGS['fr'] du fichier lang/fr.js :

External:          'Lien externe'

Le script javascript maintenant qui va ouvrir dans une nouvelle fenêtre tous les liens ayant l'attribut class="external" :

$(function() {
    $('a.external').click( function() {
        window.open(this.href);
        return false;
    });
});

Voici donc le fichier jquery.wymeditor.js modifié.
N.B : Les lignes ajoutées dans le fichier sont terminées par le commentaire suivant :

// romualb