Question

我正在制作WYSIWYG编辑器以获得乐趣。我正在使用iframe和designmode并在javascript上使用execcommand功能来创建我的WYSIWYG编辑器。我使用以下代码在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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Javascript designMode删除<font>标签？

2 个答案: