Javascript designMode 删除 <font> 标签？答案

【问题标题】：Javascript designMode remove <font> tags?Javascript designMode 删除 <font> 标签？
【发布时间】：2018-01-31 21:18:21
【问题描述】：

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

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>

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

【问题讨论】：

你能有一个 div 的 id 作为 slctdFontSizeValue 并将它传递给 execCommand 吗？

标签： javascript jquery html css fonts

【解决方案1】：

这是一个工作 jsfiddle 的链接：

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

此代码查找所有“字体”标签，并根据要求将它们替换为等效的“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();
    });
});

【讨论】：

【解决方案2】：

$(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>

【讨论】：

我试过了，它只编辑编辑器中的最后一个 div，但如果我有多个 div，那么其他 div 不会改变，它也不会删除字体标签。