Problème avec balise <hr /> stylée

[Jojaba]

Je viens de constater que lorsqu'on saisi une balise de ligne horizontale (<hr />) avec un attribut de style dans la fenêtre de composition, après validation ou passage au mode visuel, le "/" final est supprimé (dû sûrement au nettoyage de code qui s'effectue). Exemple, si je tape :
@@@@@@@@@@@@@@@@@@@@@@@@@@@

<hr style="clear: right; visibility: hidden;" />

@@@@@@@@@@@@@@@@@@@@@@@@@@@

C'est le code suivant qui reste :
@@@@@@@@@@@@@@@@@@@@@@@@@

<hr style="clear: right; visibility: hidden;">

@@@@@@@@@@@@@@@@@@@@@@@@

J'ai regardé dans le fichier manager\tools\visualedit\js\jsToolBar.wysiwyg.js qui contient les lignes de code (à partir de la ligne 375) permettant l'assainissement du code pour le convertir en XHTML valide si besoin est. Je n'ai pas réussi à trouver la raison pour la suppression du "/" final. J'avais testé avec un <hr /> sans attribut de style et là, pas de suppression du "/". Je pense que cela vient du fait que hr est une balise de type bloc et que dans ce cas, il faudrait qu'il y ait 2 balises (une "ouvrante" et une "fermante"). Mais comme mes connaissances en js sont très limitées (pour ne pas dire quasi nulles), j'arrive pas à trouver l'endroit à corriger. Pour info, ci-dessous, le code du "nettoyeur" de code :
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

/** HTML code cleanup

-------------------------------------------------------- */

jsToolBar.prototype.simpleCleanRegex = new Array(

    /* Remove every tags we don't need */

    [/<meta[\w\W]*?>/gim,''],

    [/<style[\w\W]*?>[\w\W]*?<\/style>/gim, ''],

    [/<\/?font[\w\W]*?>/gim, ''],

    /* Replacements */

    [/<(\/?)(B|b|STRONG)([\s>\/])/g, "<$1strong$3"],

    [/<(\/?)(I|i|EM)([\s>\/])/g, "<$1em$3"],

    [/<IMG ([^>]*?[^\/])>/gi, "<img $1 />"],

    [/<INPUT ([^>]*?[^\/])>/gi, "<input $1 />"],

    [/<COL ([^>]*?[^\/])>/gi, "<col $1 />"],

    [/<AREA ([^>]*?[^\/])>/gi, "<area $1 />"],

    [/<PARAM ([^>]*?[^\/])>/gi, "<param $1 />"],

    [/<(\/?)U([\s>\/])/gi, "<$1ins$2"],

    [/<(\/?)STRIKE([\s>\/])/gi, "<$1del$2"],

    [/<span style="font-weight: normal;">([\w\W]*?)<\/span>/gm, "$1"],

    [/<span style="font-weight: bold;">([\w\W]*?)<\/span>/gm, "<strong>$1</strong>"],

    [/<span style="font-style: italic;">([\w\W]*?)<\/span>/gm, "<em>$1</em>"],

    [/<span style="text-decoration: underline;">([\w\W]*?)<\/span>/gm, "<ins>$1</ins>"],

    [/<span style="text-decoration: line-through;">([\w\W]*?)<\/span>/gm, "<del>$1</del>"],

    [/<span style="text-decoration: underline line-through;">([\w\W]*?)<\/span>/gm, "<del><ins>$1</ins></del>"],

    [/<span style="(font-weight: bold; ?|font-style: italic; ?){2}">([\w\W]*?)<\/span>/gm, "<strong><em>$2</em></strong>"],

    [/<span style="(font-weight: bold; ?|text-decoration: underline; ?){2}">([\w\W]*?)<\/span>/gm, "<ins><strong>$2</strong></ins>"],

    [/<span style="(font-weight: italic; ?|text-decoration: underline; ?){2}">([\w\W]*?)<\/span>/gm, "<ins><em>$2</em></ins>"],

    [/<span style="(font-weight: bold; ?|text-decoration: line-through; ?){2}">([\w\W]*?)<\/span>/gm, "<del><strong>$2</strong></del>"],

    [/<span style="(font-weight: italic; ?|text-decoration: line-through; ?){2}">([\w\W]*?)<\/span>/gm, "<del><em>$2</em></del>"],

    [/<span style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: underline; ?){3}">([\w\W]*?)<\/span>/gm, "<ins><strong><em>$2</em></strong></ins>"],

    [/<span style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: line-through; ?){3}">([\w\W]*?)<\/span>/gm, "<del><strong><em>$2</em></strong></del>"],

    [/<span style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: underline line-through; ?){3}">([\w\W]*?)<\/span>/gm, "<del><ins><strong><em>$2</em></strong></ins></del>"],

    [/<strong style="font-weight: normal;">([\w\W]*?)<\/strong>/gm, "$1"],

    [/<([a-z]+) style="font-weight: normal;">([\w\W]*?)<\/\1>/gm, "<$1>$2</$1>"],

    [/<([a-z]+) style="font-weight: bold;">([\w\W]*?)<\/\1>/gm, "<$1><strong>$2</strong></$1>"],

    [/<([a-z]+) style="font-style: italic;">([\w\W]*?)<\/\1>/gm, "<$1><em>$2</em></$1>"],

    [/<([a-z]+) style="text-decoration: underline;">([\w\W]*?)<\/\1>/gm, "<ins><$1>$2</$1></ins>"],

    [/<([a-z]+) style="text-decoration: line-through;">([\w\W]*?)<\/\1>/gm, "<del><$1>$2</$1></del>"],

    [/<([a-z]+) style="text-decoration: underline line-through;">([\w\W]*?)<\/\1>/gm, "<del><ins><$1>$2</$1></ins></del>"],

    [/<([a-z]+) style="(font-weight: bold; ?|font-style: italic; ?){2}">([\w\W]*?)<\/\1>/gm, "<$1><strong><em>$3</em></strong></$1>"],

    [/<([a-z]+) style="(font-weight: bold; ?|text-decoration: underline; ?){2}">([\w\W]*?)<\/\1>/gm, "<ins><$1><strong>$3</strong></$1></ins>"],

    [/<([a-z]+) style="(font-weight: italic; ?|text-decoration: underline; ?){2}">([\w\W]*?)<\/\1>/gm, "<ins><$1><em>$3</em></$1></ins>"],

    [/<([a-z]+) style="(font-weight: bold; ?|text-decoration: line-through; ?){2}">([\w\W]*?)<\/\1>/gm, "<del><$1><strong>$3</strong></$1></del>"],

    [/<([a-z]+) style="(font-weight: italic; ?|text-decoration: line-through; ?){2}">([\w\W]*?)<\/\1>/gm, "<del><$1><em>$3</em></$1></del>"],

    [/<([a-z]+) style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: underline; ?){3}">([\w\W]*?)<\/\1>/gm, "<ins><$1><strong><em>$3</em></strong></$1></ins>"],

    [/<([a-z]+) style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: line-through; ?){3}">([\w\W]*?)<\/\1>/gm, "<del><$1><strong><em>$3</em></strong></$1></del>"],

    [/<([a-z]+) style="(font-weight: bold; ?|font-style: italic; ?|text-decoration: underline line-through; ?){3}">([\w\W]*?)<\/\1>/gm, "<del><ins><$1><strong><em>$3</em></strong></$1></ins></del>"],

    /* mise en forme identique contigue */

    [/<\/(strong|em|ins|del|q|code)>(\s*?)<\1>/gim, "$2"],

    [/<(br|BR)>/g, "<br />"],

    /* opera est trop strict ;)) */

    [/([^\s])\/>/g, "$1 />"],

    /* br intempestifs de fin de block */

    [/<br \/>\s*<\/(h1|h2|h3|h4|h5|h6|ul|ol|li|p|blockquote|div)/gi, "</$1"],

    [/<\/(h1|h2|h3|h4|h5|h6|ul|ol|li|p|blockquote)>([^\n\u000B\r\f])/gi, "</$1>\n$2"]/*,

    [/<(hr|HR)( style="width: 100%; height: 2px;")?>/g, "<hr />"]*/

);

/** Cleanup HTML code

*/

jsToolBar.prototype.tagsoup2xhtml = function(html) {

    for (var reg in this.simpleCleanRegex) {

        html = html.replace(this.simpleCleanRegex[reg][0], this.simpleCleanRegex[reg][1]);

    }

    /* tags vides */

    /* note : on tente de ne pas tenir compte des commentaires html, ceux-ci

       permettent entre autre d'inserer des commentaires conditionnels pour ie */

    while ( /(<[^\/!]>|<[^\/!][^>]*[^\/]>)\s*<\/[^>]*[^-]>/.test(html) ) {

        html = html.replace(/(<[^\/!]>|<[^\/!][^>]*[^\/]>)\s*<\/[^>]*[^-]>/g, "");

    }

    /* tous les tags en minuscule */

    html = html.replace(/<(\/?)([A-Z0-9]+)/g,

            function(match0, match1, match2) {

                return "<" + match1 + match2.toLowerCase();

            });

    /* IE laisse souvent des attributs sans guillemets */

    var myRegexp = /<[^>]+((\s+\w+\s*=\s*)([^"'][\w\/]*))[^>]*?>/;

    while ( myRegexp.test(html)) {

        html = html.replace(

            myRegexp,

            function (str, val1, val2, val3){

                var tamponRegex = new RegExp(val1);

                return str.replace(tamponRegex, val2+'"'+val3+'"');

            }

        )

    }

    /* les navigateurs rajoutent une unite aux longueurs css nulles */

    /* note: a ameliorer ! */

    while ( /(<[^>]+style=(["'])[^>]+[\s:]+)0(pt|px)(\2|\s|;)/.test(html)) {

        html = html.replace(/(<[^>]+style=(["'])[^>]+[\s:]+)0(pt|px)(\2|\s|;)/gi, "$1"+"0$4");

    }

    /* correction des fins de lignes : le textarea edite contient des \n

    * le wysiwyg des \r\n , et le textarea mis a jour SANS etre affiche des \r\n ! */

    html = html.replace(/\r\n/g,"\n");

    /* Trim */

    html = html.replace(/^\s+/gm,'');

    html = html.replace(/\s+$/gm,'');

    return html;

};

jsToolBar.prototype.validBlockquote = function() {

    var blockElts = ['address','blockquote','dl','div','fieldset','form','h1',

                     'h2','h3','h4','h5','h6','hr','ol','p','pre','table','ul'];

    var BQs = this.iwin.document.getElementsByTagName('blockquote');

    var bqChilds;

    for (var bq = 0; bq < BQs.length; bq++) {

        bqChilds = BQs[bq].childNodes;

        var frag = this.iwin.document.createDocumentFragment();

        for (var i = (bqChilds.length-1); i >= 0; i--) {

            if (bqChilds[i].nodeType == 1 && // Node.ELEMENT_NODE

                arrayIndexOf(blockElts, bqChilds[i].tagName.toLowerCase()) >= 0)

            {

                if (frag.childNodes.length > 0) {

                    var p = this.iwin.document.createElement('p');

                    p.appendChild(frag);

                    BQs[bq].replaceChild(p, bqChilds[i+1]);

                    frag = this.iwin.document.createDocumentFragment();

                }

            } else {

                if (frag.childNodes.length > 0) BQs[bq].removeChild(bqChilds[i+1]);

                frag.insertBefore(bqChilds[i].cloneNode(true), frag.firstChild);

            }

        }

        if (frag.childNodes.length > 0) {

            var p = this.iwin.document.createElement('p');

            p.appendChild(frag);

            BQs[bq].replaceChild(p, bqChilds[0]);

        }

    }

}

/* Removing text formating */

jsToolBar.prototype.removeFormatRegexp = new Array(

    [/(<[a-z][^>]*)margin\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)margin-bottom\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)margin-left\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)margin-right\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)margin-top\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)padding\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)padding-bottom\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)padding-left\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)padding-right\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)padding-top\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font-family\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font-size\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font-style\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font-variant\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)font-weight\s*:[^;]*;/mg, "$1"],

    [/(<[a-z][^>]*)color\s*:[^;]*;/mg, "$1"]

);

jsToolBar.prototype.removeTextFormating = function(html) {

    for (var reg in this.removeFormatRegexp) {

        html = html.replace(this.removeFormatRegexp[reg][0], this.removeFormatRegexp[reg][1]);

    }

    html = this.tagsoup2xhtml(html);

    html = html.replace(/style="\s*?"/mgi,'');

    return html;

};

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Merci d'avance pour le coup de pouce ;-)

[Loic d'Anterroches]

Salut,

Peux-tu essayer de mettre:

<img style="clear: right; visibility: hidden;" />

et me dire ce qu'il sauvegarde ?

Je n'arrive pas à trouver la raison de ce problème.

a+
loïc

[Jojaba]

Loic d'Anterroches a écrit :

> Salut,
>
> Peux-tu essayer de mettre:
>
> <img style="clear: right; visibility: hidden;" />
>
> et me dire ce qu'il sauvegarde ?
>
>

Test effectué. Il sauvegarde la même chose (le "/" est conservé), c'est
à dire :

<img style="clear: right; visibility: hidden;" />

La balise image est une balise inline. La balise <hr /> est une balise
bloc et c'est la seule qui n'est pas définie par une balise ouvrante et
fermante, c'est peut-être la cause du problème ?

[Loic d'Anterroches]

Et si tu enlèves "hr" de la liste des balises "block" cela donne quoi ?

a+
loïc

>
> >

[Jojaba]

Loic d'Anterroches a écrit :

Et si tu enlèves "hr" de la liste des balises "block" cela donne quoi ?

a+
loïc

  

J'ai enlevé les deux lignes qui concernaient hr, rien n'y fait. Je me demande si ce n'est pas une expression régulière mal définie qui engendre ce comportement. Peut être celle-là (ligne 440)  ?
@@@@@@@@@@@@@@@@@@@

/* tags vides */
    /* note : on tente de ne pas tenir compte des commentaires html, ceux-ci
       permettent entre autre d'inserer des commentaires conditionnels pour ie */
    while ( /(<[^\/!]>|<[^\/!][^>]*[^\/]>)\s*<\/[^>]*[^-]>/.test(html) ) {
        html = html.replace(/(<[^\/!]>|<[^\/!][^>]*[^\/]>)\s*<\/[^>]*[^-]>/g, "");
    }

@@@@@@@@@@@@@@@@@@@

[Jojaba]

Ça n'arrange pas le problème, le "/" est toujours supprimé.

[Loic d'Anterroches]

Jojaba wrote:
> Loic d'Anterroches a écrit :
>>
>> Et si tu enlèves "hr" de la liste des balises "block" cela donne quoi ?
>>
>> a+
>> loïc
>>
>>
> J'ai enlevé les deux lignes qui concernaient hr, rien n'y fait. Je me demande si
> ce n'est pas une expression régulière mal définie qui engendre ce comportement.
> Peut être celle-là (ligne 440) ?

Non, c'est pour les tags vides et si tu regardes bien, il n'y a rien qui
puisse différencier une balise hr de img. Je suis frustré, car je
dépends là d'un code complexe que je ne comprends pas et donc je
n'arrive pas à trouver l'origine de ce bug. Grrrr.

loïc

[Sky.X]

Pourquoi cette ligne :

/*,
[/<(hr|HR)( style="width: 100%; height: 2px;")?>/g, "<hr />"]*/

est en commentaire ?


Est-ce que ce problème existe aussi avec <br /> ?

[Jojaba]

Sky.X a écrit :

A ma connaissance, on ne peut pas ajouter de style à une balsdie <br />
du moins, je n'en vois pas l'utilité. En ce qui concerne la mise en
commentaire, j'avais fait des tests notamment en enlevant la ligne
concernant le traitement des balises <hr /> en local et avait oublié de
remettre ça à la normale par après. Le copier/coller que j'avais fait
était celui de ma version "bridée" donc.

[Jojaba]

Loic d'Anterroches a écrit :

Non, c'est pour les tags vides et si tu regardes bien, il n'y a rien qui
puisse différencier une balise hr de img. Je suis frustré, car je
dépends là d'un code complexe que je ne comprends pas et donc je
n'arrive pas à trouver l'origine de ce bug. Grrrr.

  

Ça ne pourrait pas venir de cette fonction (ligne 537 de jsToolBar.wysiwyg.js) :
@@@@@@@@@@@@@@@@@@@@@

jsToolBar.prototype.removeTextFormating = function(html) {
    for (var reg in this.removeFormatRegexp) {
        html = html.replace(this.removeFormatRegexp[reg][0], this.removeFormatRegexp[reg][1]);
    }
   
    html = this.tagsoup2xhtml(html);
    html = html.replace(/style="\s*?"/mgi,'');
    return html;
};
@@@@@@@@@@@@@@@@@@@@@

A la réflexion, non, puisque le style est carrément supprimé dans ce cas, si j'i bien compris.
J'ai fait un test avec une class, ça le fait aussi. exemple :
<hr class="rouge" /> est remplacé par <hr class="rouge">

En fait les "/" disparaissent quand je passe en mode visuel ou quand j'enregistre. Quand je clique sur le bouton de nettoyage de code, là, les "/" ne disparaissent pas ! Le problème se trouve peut-être autre part que dans les js de l'outil. Peut-être dans les fichiers de configurations.