使用execCommand将文字样式设置成css样式的办法
我们在使用contenteditable属性做富文本编辑器时经常会用到document.execCommand方法来处理文字的样式。但当我们要设置比如font-size，会发现这个命令只支持（1-7）这几种字体大小值，而不是我们想要的类似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'的样式清空。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
