Change the font size for a contentEditable div

Question

I have a contentEditable div :

<div id="editor" contentEditable="true"> Enter your text here.. </div>

And a dropdown button :

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown" title="Taille de police"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></button>
    <ul class="dropdown-menu" id="tailles"></ul>
</div>

To fill this dropdown with items I'm using this script :

//Liste des tailles utilisé
var tailles = [
    'Petite (8px)',
    'Petite (10px)',
    'Petite (12px)',
    'Normale (14px)',
    'Grande (18px)',
    'Grande (24px)',
    'Grande (36px)'
];

    //Récuperer le drop down du Taille de police
    var taillesDropDown = document.getElementById('tailles');

    //Population du drop down Taille du police
    tailles.forEach(function(taille){
        var li       = document.createElement('li');
        var a        = document.createElement('a');
        var fontSize = parseInt(/\d+/.exec(taille));
        a.style = "font-size:" + fontSize + "px" + ";height:"+(fontSize+4) + "px" + ";padding:6px;";
        a.appendChild(document.createTextNode(taille));
        a.id = fontSize + "px";
        li.appendChild(a);
        taillesDropDown.appendChild(li);
    });

And to give each item an event I'm using this script :

//Changer la taille du police
//Fonction pour proteger le contentEditable conte la perte du focus
$(function(){
    //Selectionner tous les elements du dropdown du taille du police
    $('#tailles a')
        //mettre un terme à l'événement de mousedown
       .on('mousedown', function (e) {
            e.preventDefault()
            return setTimeout(300)
        })
       //gérer l'événement clic seulement une fonction que nous pouvons attribuer ce que nous voulons faire quand nous cliquons.
       .on('click', function(e){
            document.execCommand('fontSize', false, e.currentTarget.id);
            console.log(e.currentTarget.id);
       })
})

The problem is when I choose some item in that dropdown in order to change the font size of a selected text in the editableContent div, the font size always changes to 36px.

I tried to inspect my drop down items in FireBug, and this is what I get :

<li><a id="8px" style="font-size: 8px; height: 12px; padding: 6px;">Petite (8px)</a></li>
<li><a id="10px" style="font-size: 10px; height: 14px; padding: 6px;">Petite (10px)</a></li>
<li><a id="12px" style="font-size: 12px; height: 16px; padding: 6px;">Petite (12px)</a></li>
<li><a id="14px" style="font-size: 14px; height: 18px; padding: 6px;">Normale (14px)</a></li>
<li><a id="18px" style="font-size: 18px; height: 22px; padding: 6px;">Grande (18px)</a></li>
<li><a id="24px" style="font-size: 24px; height: 28px; padding: 6px;">Grande (24px)</a></li>
<li><a id="36px" style="font-size: 36px; height: 40px; padding: 6px;">Grande (36px)</a></li>

So there is no error in the script that fills the dropdown, as you can see the id for each item has the value that should be given in the third parameter of execCommand.

I also inspected the text which I change it's font size :

<font size="7">text</font>

How can I solve this problem ?

I notices also when I changed the font size, the contentEditable uses HTML tags to do that, also for the color and font name, isn't there any method to force the contentEditable to use css instead ?

Answer 1

The document.execCommand("fontSize"... command only accpets "HTML font sizes" (1-7). see the API

fontSize - Changes the font size for the selection or at the insertion point. This requires an HTML font size (1-7) to be passed in as a value argument

You're trying to execute the command with larger sizes as arguments(12...36) so the command approximate the closest size you might have intended. Because all the arguments are larger than 7, the approximation is always 7.

If the exact pixel height doesn't matter to you, your best solution would be to change your code to use the unexact html font sizes.

also see: document.execCommand() FontSize in pixels?