Javascript designMode 删除 <font> 标签？

Question

我正在制作一个 WYSIWYG 编辑器，只是为了好玩。我正在使用带有设计模式的 iframe 并使用 javascript 上的 execcommand 功能来创建我的 WYSIWYG 编辑器。我使用以下代码在所见即所得编辑器中将字体大小应用于文本:

richTextField.document.execCommand('fontSize',false,slctdValue);

这会将 Iframe 内容更改为:

<div><font size="4" color="red">This is a test!</font></div>

我不喜欢使用字体标签，我宁愿将其替换为以下内容:

<div style="font-size:22px;color:red;">This is a test!</div>

有没有办法找到与第一个示例类似的代码并将其替换为第二个示例？

Answer 1

$(document).ready(function(){
  $('div').css({'font-size':'100%'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size:22px;color:red;">This is a test!</div>