Размер тумблера/untoggle document.execCommand

Question

Я работаю над небольшим сценарием здесь, используя contenteditable.

Он переключает/отталкивает полужирным шрифтом, подчеркивание, курсив, но я не могу сделать его глупым шрифтом. Он переключает его, а затем он остается таким.

Работа демо: https://jsfiddle.net/zesaj9ck/2/

<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button> 
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button> 
<button id="toggle_bolt" onclick="document.execCommand('fontSize', false, 7);">toggle size</button> 

<div id="wmd-input" contenteditable="true"></div> 

Answer 1

Это не «переключение» или изменения вообще после первого щелчка, потому что каждый щелчок просто устанавливает размер до 7. Размер шрифта не только два состояния, как полужирный, курсивом и подчеркиванием. В приведенном ниже рабочем примере вместо этого вводится заданное значение размера.

Я также рекомендую переместить обработчики кликов на функции, как это было сделано с функцией changeSize. Это создает более четкое разделение проблем и улучшает ремонтопригодность.

function changeSize(increase) { 
 
    var value = parseInt(document.getElementById('size').value, 10) + (increase ? 1 : -1); 
 
    
 
    document.execCommand('fontSize', false, value); 
 
    document.getElementById('size').value = value; 
 
}

#wmd-input { 
 
    width : 500px; 
 
    min-height : 100px; 
 
    border : 2px solid; 
 
}

<button id="toggle_bolt" onclick="document.execCommand('bold');">toggle bolt</button> 
 
<button id="toggle_bolt" onclick="document.execCommand('italic');">toggle italic</button> 
 
<button id="toggle_bolt" onclick="document.execCommand('underline');">toggle underline</button> 
 
<button id="toggle_bolt" onclick="changeSize(true)">Size +</button> 
 
<button id="toggle_bolt" onclick="changeSize(false)">Size -</button> 
 
<input id="size" value="4" readonly /> 
 
<div id="wmd-input" contenteditable="true"></div>