更改字體大小爲CONTENTEDITABLE DIV

我有一個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>&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); 
     }) 
})

問題是，當我爲了改變所選文本的字體大小在editableContent div選擇在dropdown一些項目，字體大小的變化總是要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而不是？

來源

2014-03-01 Ichigo Kurosaki

的ID不能以數字開頭，也許這就是導致您的問題。 http://css-tricks.com/ids-cannot-start-with-a-number/ – lefoy

ID's不能以數字開頭，也許這就是導致你的問題的原因。 http://css-tricks.com/ids-cannot-start-with-a-number/ – lefoy

不錯，但ID可能以HTML5中的數字開頭（http://dev.w3.org/html5/markup/global -attributes.html＃common.attrs。id） –

document.execCommand("fontSize"...命令僅支持「HTML字體大小」（1-7）。看到API

fontSize的 - 改變的字體大小的選擇或在插入點。這需要一個HTML字體大小（1-7），以作爲值參數

你試着用大尺寸作爲參數來執行命令（12 ... 36）上的命令大致可以傳遞您可能想要的最接近的尺寸。因爲所有的參數都大於7，近似總是7.

如果精確的像素高度不要緊，你，你最好的解決方案將改變你的代碼以使用unexact HTML字體大小。

還看到： document.execCommand() FontSize in pixels?

來源

2014-03-01 16:31:16 TastySpaceApple

更改字體大小爲CONTENTEDITABLE DIV

回答

相關問題