使用contentEditable中的execCommand更改列表项目编号/点颜色？

Question

我试图在contentEditable div中更改文本的颜色。我使用以下代码执行此操作：

    document.execCommand( 'styleWithCSS', false, true );
    document.execCommand( 'foreColor', false, color );

这非常好用。但如果我尝试在<ul>或<ol>中执行此操作，则这是我的输出：

<ul><li><span style="color: rgb(0, 0, 255);">abc</span></li><li><span style="color: rgb(0, 0, 255);">def</span></li><li><span style="color: rgb(0, 0, 255);">ghi</span></li></ul>

因为你可以看到它包裹文本而不是<li>所以点/数字不会改变颜色。

如何在列表中包含点/数字，以便它们也改变颜色？

这在Angular 2中完成，因此在此上下文中优选地是解决方案。 JS也可以工作