JavaScript execCommand selection

Question

У меня есть редактор, который меняет размеры шрифта, цвета, стили и т. Д. Но когда текст находится в упорядоченных / неупорядоченных списках, цифры и маркеры не меняются. Это связано с тем, что выбор не включает тег li только выделенный текст. Я хотел бы получить стиль вокруг li, а не просто текст в списке.

<div contenteditable="true" onmouseup="setfontSize ();">
 My List
 <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ol>
</div>

<script>
 function setfontSize () {
    document.execCommand ('fontSize', false, 7);
 }
</script>

Я хотел бы добиться этого, когда элементы выбраны:

<ol>
      <font size="7"><li>Item 1</li></font>
      <font size="7"><li>Item 2</li></font> 
      <font size="7"><li>Item 3</li></font>
</ol> 

Вместо этого:

<ol>
     <li><font size="7">Item 1</font></li>
     <li><font size="7">Item 2</font></li> 
     <li><font size="7">Item 3</font></li>
</ol> 

Это возможно? Спасибо.