CODEWITHSUNDEEP
javascriptjqueryiframe
ThePloki
ThePloki

Reputation: 185

iFrame WYSIWYG font size won't reset

Here's my jsFiddle: https://jsfiddle.net/wsounka3/

When I change the font size within the WYSIWYG and then delete all of the written text and begin writing again it retains the last font size instead of starting fresh again.

How can I make the iframe "forget" the last font size?

Code:

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

Side question: I find it strange that by encasing the text in <big> and <small> tags, it decides to translate that into pixels. Can anyone explain why it does this?

Upvotes: 0

Views: 28

Answers (1)

Steve
Steve

Reputation: 2046

Because when you click delete you are deleting the textual content and not the wrapping tag. You can clear the markup when there is no textual content - plus there is a Chrome bug that retains the last element size, so wrapping in a [span] tag prior to removing seams to fix that

Since you call update_code on keyup, simply add a cleanup check there

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 to SPAN:size also appears to be an automatic chrome thing

Upvotes: 2

Related Questions