IE는 문제 - 내가 여기 내 jsfiddle에 기능과 같은 몇 가지 기본적인 WYSIWYG을 시도하고

Question

편집 가능한 프레임에 HTML을 삽입 - 지금은 http://jsfiddle.net/Q6Jp9/28/

, 내가 뭘하려고 모두가 "마크 업"에서 사용자의 입력을하다 상자를 클릭하고 Visual 단추를 클릭하면 "시각적"상자에 삽입하십시오. 시각적 상자는 편집 가능한 iframe입니다.

내 jsfiddle 예제는 Firefox 및 Chrome 브라우저에서 잘 작동합니다. IE9와 IE10에서는 텍스트가 두 번째 시도에 나타납니다. 마크 업 상자에 텍스트를 입력 한 후 시각적 버튼을 처음 클릭하면 iframe이 편집 가능하지만 텍스트가 없습니다. 마크 업을 클릭 한 다음 다시 시각을 클릭하면 텍스트가 표시됩니다.

여기는 바이올린의 자바 스크립트 부분입니다.

function iframe_load() { 
var txtBox = $("#txtMarkup"); 
var iframe = document.getElementById('iframe'); 
var contentWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView; 
$(iframe).show(); 
$("#btnVisual").removeClass("notSelected").addClass("selected"); 
$("#btnMarkup").removeClass("selected").addClass("notSelected"); 

if (document.all) { //IE 
    contentWindow.document.designMode = 'On';   
    var range = contentWindow.document.body.createTextRange(); 
    range.pasteHTML($(txtBox).val()); 
    range.collapse(false); 
    range.select(); 
    contentWindow.focus(); 
} else { 
    contentWindow.document.designMode = 'On'; 
    contentWindow.document.execCommand('selectAll', null, null); //Required to prevent appending 
    try { //This throws an error in FireFox, but command is successful 
     contentWindow.document.execCommand('insertHtml', false, $(txtBox).val()); 
    } catch (ex) {} 
    contentWindow.focus(); 
} 
return false; 
} 

function iframe_hide() { 
var txtBox = $("#txtMarkup"); 
var iframe = document.getElementById('iframe'); 

$(txtBox).show(); 
$(iframe).hide(); 
$("#btnMarkup").removeClass("notSelected").addClass("selected"); 
$("#btnVisual").removeClass("selected").addClass("notSelected"); 

return false; 
} 

미리 감사드립니다.

Answer 1

iframe을 표시하고 편집 할 수있게 잠시 기다려야하는 경우가있을 것이라고 생각합니다. 이것은 작동하는 것 같다 :

데모 : http://jsfiddle.net/Q6Jp9/35/

코드 :

function iframe_load() { 
    var txtBox = $("#txtMarkup"); 
    var iframe = document.getElementById('iframe'); 
    var contentWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView; 
    $(iframe).show(); 
    $("#btnVisual").removeClass("notSelected").addClass("selected"); 
    $("#btnMarkup").removeClass("selected").addClass("notSelected"); 

    contentWindow.document.designMode = 'on'; 

    window.setTimeout(function() { 
     var doc = iframe.contentDocument || iframe.contentWindow.document; 
     if (doc.body.createTextRange) { 
      var range = doc.body.createTextRange(); 
      range.pasteHTML(txtBox.val()); 
      range.collapse(false); 
      range.select(); 
      contentWindow.focus(); 
     } else { 
      doc.execCommand('selectAll', null, null); //Required to prevent appending 
      doc.execCommand('insertHtml', false, txtBox.val()); 
     } 
     contentWindow.focus(); 
    }, 20); 

    return false; 
}