[英]Change the font size for a contentEditable div
我有一个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> <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-更改所选内容或插入点的字体大小。 这要求将HTML字体大小(1-7)作为值参数传递
您正在尝试以较大的大小作为参数(12 ... 36)执行命令,以便该命令近似于您可能想要的最接近的大小。 由于所有参数都大于7,因此近似值始终为7。
如果确切的像素高度对您而言并不重要,那么最好的解决方案是将代码更改为使用不精确的html字体大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.