웹 기반 텍스트 편집기의 실시간 미리보기를 만드는 방법은 무엇입니까?

Question

글쎄,이 Stackoverflow 편집기처럼. 추가로 js를로드 할 때이 작업을 수행하는 방법은 무엇입니까? (math.stackexchange의 실시간 수학 미리보기처럼)

명백히, 내가 지금 원하는 것은 명시 적으로 즉시 새로 고치는 방법입니다.

지금 내가 가지고 올 수있는 것은

show(){ 
    var text=document.getElementById("preview"); 
    var input=document.getElementById("inputArea").value; 
    text.innerHTML=input; 
} 
<textarea id="inputArea">fd</textarea> 
<p id="preview"></p> 
<button onclick="show()">show</button> 

이다 그러나 이것은 분명히 실시간 없습니다. 타이머를 추가하고 0.1 초마다 'show()'를 실행할 수도 있습니다. 그러나 이것 역시 제가 생각하기에 현명하지 않습니다.

이것을 구현할 수있는 원시 HTML 또는 javascript 메소드가 있습니까?

Answer 1

여기 알로하 에디터를 살펴보십시오.

http://www.aloha-editor.org/

Answer 2

<script> 
function show(v){ 
    document.getElementById("preview").innerHTML = v; 
} 
</script> 
<textarea id="inputArea" onkeyup="show(this.value)"></textarea> 
<p id="preview"></p> 

당신은 심지어 JS 조각 밖으로 그것을 할 수 있습니다 :

<textarea id="inputArea" onkeyup="document.getElementById('preview').innerHTML=this.value"></textarea> 
<p id="preview"></p>