如何对基于web的文本编辑器进行实时预览

How to make a realtime preview of a web-based text editor?

本文关键字：编辑器 实时 文本编辑 文本 web      更新时间：2023-09-26

好吧，就像这个堆栈溢出编辑器一样。此外，如何在加载额外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方法可以实现这一点？

这里，看看Aloha编辑器。

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

<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>
相关文章：