我有一个contentEditable div
:
<div id="editor" contentEditable="true"> Enter your text here.. </div>
还有一个下拉按钮
:
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" title="Taille de police"><i class="fa fa-text-height"></i> <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
相反?
最佳答案
document.execCommand("fontSize"...
命令仅支持“HTML 字体大小”(1-7)。
查看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
您正尝试以更大的尺寸作为参数 (12...36) 执行命令,因此该命令接近您可能预期的最接近尺寸。因为所有参数都大于 7,所以近似值始终为 7。
如果确切的像素高度对您来说不重要,您最好的解决方案是更改您的代码以使用不精确的 html 字体大小。
关于javascript - 更改 contentEditable div 的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22116956/