document.execCommand如何有效设置fontSize

当选取一段文字后，如果要实现对选取的文字设置大小，通常可以使用document.execCommand("fontSize",false, 5) 来实现，一般针对类似富文本场景，但是实际用这个方法操作后发布并不能实现某个像素的大小，比如24px,由于execCommand限制，第三个参数只能是1到7，如果要自定义大小，需要通过如下方式操作，以下是在vue中实现，其他方式类似。

<div>
	<button @click="command('12px')">font-size12</button></div>
      <div><button @click="bold">b</button></div>
      <div contenteditable="true" class="input-editor">通过filereader接口读取文件</div>
</div>
	<script>
		command(value) {
			// 打开通过css设置样式开关
			document.execCommand( 'styleWithCSS', false, true);
		      // 先将文字大小设置成1-7号中的任何一个大小
		      document.execCommand( 'fontSize', false, 5);
		      // 这时候浏览器会默认将文字包裹一层span，然后css设置在span上,然后我们再去寻找这个span，将其css修改成我们实际想要的字体大小
		      let $parent = document.querySelector('.input-editor');
		      let $spans = $parent.querySelectorAll( 'span');
		      $spans.forEach( ($span) => {
		          if ($span.innerHTML.indexOf(document.getSelection().toString()) !== -1) {
		            $span.style.fontSize = value
		          }
		      });
		}
	</script>

其中值得注意的是点击事件必须放在button标签上，如果是其他标签是无效的，foreach里面的代码的功能是只改选取文字的样式，未选取的文字不改样式，我看网上的方法并未实现该功能，网上的方法如果重复点击就会把所有的文字都改成一样的样式。

本文章由javascript技术分享原创和收集