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>

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

<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/

此代码查找所有"font“标记，并根据请求将它们替换为等效的"div”。

下面是我所做的：

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();
    });
});