使用execCommand将文字样式设置成css样式的办法

我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size，会发现这个命令只支持（1-7）这几种字体大小值，而不是我们想要的类似css样式的值详细文档。有此类问题的样式还包括行高、颜色等到。但实际上我们的需求可能是将其设置成css样式，那就可以使用下面的方法来实现。

以设置字体大小为例：

// 先将文字的样式改用CSS样式展示
document.execCommand('styleWithCSS', null, true);
// 先将文字大小设置成1-7号中的任何一个大小
document.execCommand('fontSize', false, 1);
// 这时候浏览器会默认将文字包裹一层span，然后css设置在span上,然后我们再去寻找这个span，将其css修改成我们实际想要的字体大小
let $parent = document.querySelector('正在编辑的元素的父容器');
let $spans = $parent.querySelectorAll('span');
let value = '48px'; // 假设我们要将字体大小设置成48px
$spans.forEach(($span) => {
  let fontSize = $span.style.fontSize;
  if ('x-small' == fs) {
    $span.style.fontSize = value;
  }
});

其它样式调整也可以用该方法找到对应的span后修改style值实现，只是最后要把font-size='x-small'的样式清空。