div éditable - changement de fontSize et interligne
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:
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:
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:
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; |
