Javascript designMode移除<font>標籤？

Question

我正在製作一個所見即所得的編輯器。我正在使用設計模式的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>

Answer 2

下面是一個工作的jsfiddle鏈接：

https://jsfiddle.net/jonolayton/0851d2uk/4/

這個代碼是找到所有的 「字體」 標籤，並用相當於 「格」 替換它們的要求。

這裏就是我所做的：

HTML：

<div> 
    <font size="4" color="red">This is a test!</font> 
    <font size="4" color="green">This is a test!</font> 
    <font size="4" color="blue">This is a test!</font> 
    <font size="4" color="pink">This is a test!</font> 
    <font size="4" color="yellow">This is a test!</font> 
    <font size="4" color="brown">This is a test!</font> 
</div> 

的Javascript：

$(document).ready(function() { 
    $('font').each(function() { 
     var size = $(this).attr('size'); 
     var color = $(this).attr('color'); 
     var text = $(this).text(); 

     $('<div></div>').insertAfter($(this)).css({ 
      'font-size' : '22px', 
      'color' : color 
     }).text(text); 
     $(this).remove(); 
    }); 
});