javascript - iFrame WYSIWYG 字体大小不会重置

Question

这是我的 jsFiddle:https://jsfiddle.net/wsounka3/

当我更改所见即所得的字体大小，然后删除所有写入的文本并再次开始写入时，它会保留最后的字体大小，而不是重新开始。

如何让 iframe“忘记”最后的字体大小？

代码:

function iwrap(elem,iwin,idoc){
  var element = idoc.createElement(elem);
  var sel = iwin.getSelection();
  if(sel.rangeCount){
     var range = sel.getRangeAt(0).cloneRange();
     range.surroundContents(element);
     sel.removeAllRanges();
     sel.addRange(range);
  }
}

$('#smaller').click(function(){
    iwrap('small',iwin,idoc);
  update_code();
});

$('#larger').click(function(){
    iwrap('big',iwin,idoc);
  update_code();
});

附带问题:我觉得很奇怪，将文本包含在 <big> 中和<small>标签，它决定将其转换为像素。谁能解释一下为什么这样做？

Answer 1

因为当您单击“删除”时，您将删除文本内容，而不是换行标签。当没有文本内容时，您可以清除标记 - 另外，Chrome 存在一个错误，该错误会保留最后的元素大小，因此在删除接缝之前用 [span] 标签包裹以修复该问题

由于您在 keyup 上调用 update_code，因此只需在此处添加清理检查

function update_code(){
    var $body = $(idoc).contents().find('body');
    if ($.trim($body.text()).length == 0) {
       iwrap('span', iwin, idoc); // chrome bug
       $body.empty();
    }

    var icontent = $body.html();
    $('div#code').html(icontent);
}

BIG/SMALL 到 SPAN:size 似乎也是一个自动的 chrome 东西