javascript - Change the font size for a contentEditable div - Stack Overflow

admin管理员组

文章数量:1307860

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 ?

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 ?

• javascript
• html
• css
• contenteditable

Share Improve this question Follow edited Mar 1, 2014 at 16:48 TastySpaceApple 3,18511 gold badge2222 silver badges2727 bronze badges asked Mar 1, 2014 at 16:26 Renaud is Not Bill GatesRenaud is Not Bill Gates 2,0843838 gold badges115115 silver badges212212 bronze badges 3

• ID's can't start with numbers, maybe it's what cause your problem. css-tricks./ids-cannot-start-with-a-number – lefoy Commented Mar 1, 2014 at 16:29
• ID's can't start with numbers, maybe it's what cause your problem. css-tricks./ids-cannot-start-with-a-number – lefoy Commented Mar 1, 2014 at 16:29
• Good catch, but IDs may start with numbers in HTML5 (dev.w3/html5/markup/global-attributes.html#mon.attrs.id) – Nico O Commented Mar 1, 2014 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The document.execCommand("fontSize"... mand 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 mand with larger sizes as arguments(12...36) so the mand 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?

hey i got an answer for you

HTML :

 <div class="font-size">
                        <p>font-size:</p>
                        <button id="increase" onclick="increase()">A+</button>
                        <button id="decrease" onclick="decrease()">a-</button>
                    </div>

JS :

 function increase() {
      txt = document.getElementById('Your text id');
      style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
      selection = window.getSelection();
      currentSize = parseFloat(style);
      txt.style.fontSize = (currentSize + 1) + 'px';
      document.getElementById("Write").innerHTML = text.replace(selection, txt)
    }
    function decrease() {
      txt = document.getElementById('You text id');
      style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
      currentSize = parseFloat(style);
      txt.style.fontSize = (currentSize - 1) + 'px';
    }

本文标签： javascriptChange the font size for a contentEditable divStack Overflow