Discussion :

[Lucille94]

Bonjour,

Je construis une appli qui contient une div éditable, dans laquelle un utilisateur peut saisir et mettre en forme du texte.
Je rencontre des problèmes pour la gestion de la taille de police et de l'interligne.

Sur ma div, j'ai défini par défaut un font size (16px) et un line-height (=1, donc normalement proportionnel à la taille du texte).

Pour changer la taille de la police, j'ai un bouton qui lance une commande execCommand :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
//taille du texte
	$('#inputFontSize').on("change", function(){
	    var spanString = $('<span/>', {
			'text': document.getSelection()
	    }).css('font-size', this.value).prop('outerHTML');
	   document.execCommand('insertHTML',false, spanString); //utilisation de la commande insertHTML à la place de FontSize. Semble mieux(?)
            // autres vérifications 
	});

Voici maintenant le problème que je rencontre :
Si je change plusieurs fois la taille du texte d'un paragraphe, je peux me retrouver avec plusieurs balises <span> imbriquées. Cela provient du fait que pour sélectionner un paragraphe, on peut double-cliquer dessus ou bien sélectionner manuellement les mots. Lorsque j'ai des balises imbriquées, je me retrouve avec la taille de la police définie dans un <span> mais avec l'interligne du <span> parent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div contenteditable="true" class="a" id="editeur">
    <span style="font-size: 27px;">
        <span style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae convallis libero, a rutrum sapien. Sed nulla massa, commodo et elementum vel, vulputate vitae libero. Fusce non turpis molestie, eleifend risus vitae, lobortis orci.
        </span>
    </span>
</div>

Ma question est : comment faire pour que l'interligne corresponde à la taille de la police affichée? ou alors comment nettoyer le html pour supprimer la première balise <span style="font-size: 27px;"> qui a priori ne sert à rien (à part me mettre un "mauvais" interligne!).
D'avance, merci.

Voici également le css de la div éditable si besoin

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#editeur {
    border: 1px solid black;
    color: black;
    font-family: Arial;
    font-size: 16px;
    line-height: 1.18;
    overflow: hidden;
    padding: 5px 5px 10px;
    word-wrap: break-word;
}
.a {
    height: 380px;
    max-height: 380px;
    max-width: 390px;
    width: 390px;

[Lucille94]

Finalement, je suis revenue à l'utilisation de la commande 'fontSize' pour la mise à jour de la taille de la police, et ce pour des raisons de compatibilité avec IE (IE ne reconnait pas la commande insertHTML).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
//taille du texte
$('#inputFontSize').on("change", function(){
	document.execCommand('fontSize', false,  '7');
	$("font[size='7']").css("font-size", this.value).removeAttr("size");
	//autres vérifications
});

Après ça, je n'ai pas su reproduire mon problème d'interligne...

[Beginner.]

Salut,

Tu peux utiliser la fonction surroundContents() comme ici : http://jsbin.com/siqugejohu/1/edit?h...console,output

Mais le problème c'est que les "extrémités" du texte sélectionné doivent appartenir à la même balise pour que cela fonctionne...

On n'a pas ce problème avec la fonction execCommand();.

[Lucille94]

Merci.

Je comprends que la solution proposée par Beginner est en fait l'équivalent de execCommand('insertHTML', false, myText), mais sans le problème d'incompatibilité avec IE. Par contre ça peut renvoyer une erreur...
Malgré ça, mon problème n'est pas résolu puisque j'ai toujours une différence entre l'interligne et la police, à cause des 2 spans imbriqués. Cela vient du fait que le getSelection() ne retourne pas tout à fait la même chose selon que l'on ait double-cliqué sur le paragraphe ou sélectionné manuellement celui-ci.

Peut-être qu'une solution serait, à chaque changement de fontSize, de vérifier si le parent est une balise <font> et contient d'autres éléments. Si il n'y a pas d'autres éléments, il faut supprimer la propriété font-size du parent.

[Beginner.]

Pourquoi tu utilises de span imbriqués ? Sinon cela ne fonctionne pas même en fixant l'interligne ? Peut-être que l'interligne est différent parce que la taille est différente ? Et aussi l'interligne de la div#editeur est fixé à 1.18 et non à 1 comme tu voulais ?

En fait je crois que ne doit pas avoir bien compris le problème...

[Lucille94]

En fait ce n'est pas moi qui choisis de faire des spans imbriqués... mais bon comme l'utilisateur peut changer le style à sa guise, ça arrive assez régulièrement.
Disons qu'à force de manipuler le texte, l'utilisateur ne comprend pas ce qui est affiché. Je peux par exemple me retrouver avec un html comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div contenteditable="true" class="a" id="editeur">
    <font style="font-size: 32px;">
        <font style="font-size: 11px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend pretium mi non tempus. Quisque tincidunt, justo a lobortis rhoncus, justo risus ultricies velit, non dignissim massa risus fringilla </font>
        purus.
    </font>
</div>

Et dans ce cas, quand je sélectionne tout le paragraphe et que je change la taille (sélection 43px) , le texte écrit en 11px ne change pas de taille mais par contre il change d'interligne. Ce qui n'est pas vraiment compréhensible pour l'utilisateur qui a sélectionné une taille de 43 px...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div contenteditable="true" class="a" id="editeur">
    <font style="font-size: 43px;">
        <font style="font-size: 11px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend pretium mi non tempus. Quisque tincidunt, justo a lobortis rhoncus, justo risus ultricies velit, non dignissim massa risus fringilla </font>
        purus.
    </font>
</div>

Même si ça reste compréhensible du point de vue du développeur (j'imagine que le calcul du line-height est basé sur la <font> de plus haut niveau), ce comportement est déroutant pour l'utilisateur.

Je pense qu'il faudrait que le texte n'ai toujours qu'un seul niveau de <font>, du genre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div contenteditable="true" class="a" id="editeur">
    <font style="font-size: 11px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend pretium mi non tempus. Quisque tincidunt, justo a lobortis rhoncus, justo risus ultricies velit, non dignissim massa risus fringilla </font>
    <font style="font-size: 43px;">        
        purus.
    </font>
</div>

Et dans ce cas là l'interligne devrait être davantage cohérent avec le font-size.

J'ai pensé à une procédure mais je ne l'ai pas encore codé... Je poste dès que c'est fait (et si ça fonctionne!)

Et au fait, line-height à 1 ou à 1.18 peu importe. Le principal c'est que ça soit en mode "proportionnel"