텍스트 영역 요소로 iFrame 소스 코드 동기화

내 콘텐츠 관리 시스템 (CMS) 용 순수 JavaScript WYSIWYG 편집기를 개발 중입니다. 이렇게하려면 IFRAME의 소스 코드를 TEXTAREA 요소의 내용과 동기화해야하므로 소스 코드보기와 서식있는 텍스트를 앞뒤로 전환 할 수 있습니다. 일부 코드는 함께 가지고 있지만 데이터를 동기화하지만 소스 편집기 (TEXTAREA)가 아닌 리치 텍스트 편집기 (IFRAME)에서만 내용을 변경할 수 있습니다. 이 방법의 목적은 POST 양식을 통해 서버에 데이터를 제출하는 것입니다. 나는 jQuery도 사용하고 싶지 않다. 나는 "JavaScript 전문가"가 아니다. 어쨌든 여기 내 코드의 섹션 :텍스트 영역 요소로 iFrame 소스 코드 동기화

<iframe id="editor" frameborder="0"></iframe> 
<textarea id="html" onchange="document.getElementById('editor').contentWindow.document.body.innerHTML=this.value;"></textarea> 
<script> 
var e = document.getElementById("editor").contentWindow; 
e.document.designMode = "on"; 
e.document.open(); 
e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>"); 
e.document.close(); 

function def() { 
    document.getElementById("fontName").selectedIndex = 0; 
    document.getElementById("fontSize").selectedIndex = 1; 
    document.getElementById("foreColor").selectedIndex = 0; 
} 

function edit(x, y) { 
    e.document.execCommand(x, false, y); 
    e.focus(); 
} 

setInterval(function() { 
    document.getElementById("html").value = e.document.body.innerHTML; 
}, 200); 
</script>

출처

2012-10-10 Solo

그것을 파악이 다른 사람 도움이되기를 바랍니다;

<iframe id="editor" frameborder="0">test</iframe> 
<textarea id="html" onfocus="editor.rte();" onblur="editor.source();"></textarea> 
<script> 
<!-- 
//<![CDATA[ 
var editor = function() { 
    var e = document.getElementById("editor").contentWindow; 
    e.document.designMode = "on"; 
    e.document.open(); 
    e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>"); 
    e.document.close(); 
    var a, b; 
    return { 
     run:function(c, s) { 
      e.document.execCommand(c, false, s); 
     }, 
     source:function() { 
      clearInterval(b); 
      a = setInterval(function(){document.getElementById("html").value = e.document.body.innerHTML;}, 200); 
     }, 
     rte:function() { 
      clearInterval(a); 
      b = setInterval(function(){e.document.body.innerHTML = document.getElementById("html").value;}, 200); 
     } 
    }; 
}(); 
editor.source(); 
//]]> 
--> 
</script>

출처

2012-10-11 01:08:19 Solo

그 코드가 나쁜

@solo), < 입력을 입력하려고 > 내부 textarea. 간격 때문에 입력 할 수 없습니다. 그래서, 내 팁은 코드를 실행 한 후 사용자가 타이핑을 끝내는 것입니다. 내 나쁜 영어

에 대한

var timer = null; 
$('textarea').keydown(function(){ 
    clearTimeout(timer); 
    timer = setTimeout(doStuff, 300) 
}); 

function doStuff() { 
    e.document.body.innerHTML = document.getElementById("html").value; 
}

죄송합니다 .. 같이

출처

2013-12-28 03:56:25

텍스트 영역 요소로 iFrame 소스 코드 동기화

답변

관련 문제