更改 contentEditable div 的字体大小

Question

我有一个contentEditable div：

\n\n

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

\n\n

还有一个dropdown button：

\n\n

<div class="btn-group">\n    <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>\n    <ul class="dropdown-menu" id="tailles"></ul>\n</div>\n

\n\n

为了用项目填充此下拉列表，我正在使用此脚本：

\n\n

//Liste des tailles utilis\xc3\xa9\nvar tailles = [\n    \'Petite (8px)\',\n    \'Petite (10px)\',\n    \'Petite (12px)\',\n    \'Normale (14px)\',\n    \'Grande (18px)\',\n    \'Grande (24px)\',\n    \'Grande (36px)\'\n];\n\n    //R\xc3\xa9cuperer le drop down du Taille de police\n    var taillesDropDown = document.getElementById(\'tailles\');\n\n    //Population du drop down Taille du police\n    tailles.forEach(function(taille){\n        var li       = document.createElement(\'li\');\n        var a        = document.createElement(\'a\');\n        var fontSize = parseInt(/\\d+/.exec(taille));\n        a.style = "font-size:" + fontSize + "px" + ";height:"+(fontSize+4) + "px" + ";padding:6px;";\n        a.appendChild(document.createTextNode(taille));\n        a.id = fontSize + "px";\n        li.appendChild(a);\n        taillesDropDown.appendChild(li);\n    });\n

\n\n

为了给每个项目一个事件，我正在使用这个脚本：

\n\n

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

\n\n

问题是，当我选择其中的某个项目dropdown以更改 中所选文本的字体大小时editableContent div，字体大小总是更改为36px。

\n\n

我尝试检查我的下拉项目FireBug，这就是我得到的：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

我怎么解决这个问题 ？

\n\n

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

\n

Answer 1

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

fontSize - 更改所选内容或插入点的字体大小。这需要将 HTML 字体大小 (1-7) 作为值参数传入

您尝试使用较大的大小作为参数（12...36）来执行命令，以便该命令接近您可能想要的最接近的大小。由于所有参数都大于 7，因此近似值始终为 7。

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

另请参阅： document.execCommand() FontSize（以像素为单位）？