Javascript 更改contentEditable div的字体大小

我有一个

内容可编辑的div

：

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

要用我使用的脚本填充此下拉列表中的项目，请执行以下操作：

//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);
    });

//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);
       })
})

为了给每个项目一个事件，我使用以下脚本：

//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);
    });

//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);
       })
})

问题是，当我在

下拉列表中选择某个项目时，为了更改
editableContent div
中选定文本的字体大小，字体大小始终更改为
36px

我尝试在FireBug中检查我的下拉项，结果如下：

<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>

我怎样才能解决这个问题

我还注意到，当我更改字体大小时，contentEditable使用HTML标记来实现这一点，颜色和字体名称也是如此，难道没有任何方法可以强制contentEditable使用
css
来代替吗？
document.execCommand（“fontSize”…

命令仅accpets“HTML字体大小”（1-7）。 见

fontSize-更改所选内容或插入时的字体大小 这需要将HTML字体大小（1-7）作为 值参数

您正在尝试使用较大的参数（12…36）执行该命令，因此该命令的大小与您预期的最接近。由于所有参数都大于7，因此近似值始终为7

如果确切的像素高度对您来说无关紧要，那么最好的解决方案是将代码更改为使用未生效的html字体大小

另见：

---

document.execCommand（“fontSize”…命令仅接受“HTML字体大小”（1-7）。 见

fontSize-更改所选内容或插入时的字体大小 这需要将HTML字体大小（1-7）作为 值参数

您正在尝试使用较大的参数（12…36）执行该命令，因此该命令的大小与您预期的最接近。由于所有参数都大于7，因此近似值始终为7

如果确切的像素高度对您来说无关紧要，那么最好的解决方案是将代码更改为使用未生效的html字体大小

另见：

---

ID不能以数字开头，可能是因为它导致了您的问题。ID不能以数字开头，可能是因为它导致了您的问题。很好的理解，但在HTML5中ID可能以数字开头（）我不知道，谢谢你让我知道。ID不能以数字开头，可能是你的问题的原因。ID不能以数字开头，可能是你的问题的原因。很好的理解，但ID可能以HTML5中的数字开头（）我不知道，谢谢你让我知道。