JavaScript执行命令选择

我有一个编辑器，可以更改字体大小、颜色、样式等。但是当文本处于有序/无序列表中时，数字和项目符号不会更改。这是因为所选内容不包含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>

我的名单
项目1
项目2
项目3
函数setfontSize（）{
document.execCommand（'fontSize'，false，7）；
}

我希望在选择项目时实现这一点：

<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> 

项目1
第2项
项目3

与此相反：

<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> 

项目1
第2项
项目3

可能吗？多谢各位