更改 contentEditable div 的字体大小答案

【问题标题】：Change the font size for a contentEditable div更改 contentEditable div 的字体大小
【发布时间】：2014-03-01 16:26:05
【问题描述】：

我有一个contentEditable div：

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

还有一个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>

要使用我正在使用此脚本的项目填充此下拉列表：

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

问题是当我在dropdown 中选择某个项目以更改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>

所以在填充dropdown 的脚本中没有错误，因为您可以看到每个项目的id 具有应该在execCommand 的第三个参数中给出的值。

我还检查了我更改字体大小的文本：

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

我该如何解决这个问题？

我还注意到，当我更改字体大小时，contentEditable 使用 HTML 标记来执行此操作，也用于颜色和字体名称，是否有任何方法可以强制 contentEditable 使用 css 代替？

【问题讨论】：

ID 不能以数字开头，这可能是您的问题的原因。 css-tricks.com/ids-cannot-start-with-a-number
ID 不能以数字开头，这可能是您的问题的原因。 css-tricks.com/ids-cannot-start-with-a-number
不错，但 ID 可能以 HTML5 中的数字开头 (dev.w3.org/html5/markup/global-attributes.html#common.attrs.id)
不知道，谢谢告知。

标签： javascript html css contenteditable

【解决方案1】：

document.execCommand("fontSize"... 命令只接受“HTML 字体大小”(1-7)。见API

fontSize - 更改选择或插入时的字体大小观点。这需要将 HTML 字体大小 (1-7) 作为价值论据

您正在尝试以较大的大小作为参数 (12...36) 执行命令，因此该命令接近您可能想要的最接近的大小。因为所有参数都大于 7，所以近似值总是 7。

如果确切的像素高度对您来说并不重要，您最好的解决方案是更改您的代码以使用不准确的 html 字体大小。

另见： document.execCommand() FontSize in pixels?

【讨论】：