今天在github 上看到一個非常巧妙的項目：umpox/TinyEditor 使用簡單的瀏覽器就能構造一個簡單的實時運行代碼的基於瀏覽器的前端編輯器，只需要很少代碼； 使用方法： 粘貼如下代碼到瀏覽器地址欄，（我測試了Chrome）, 即可得到這樣一個好用的編輯器。 我們分析下其代碼： 其構造了三 ...
今天在github 上看到一個非常巧妙的項目：umpox/TinyEditor 使用簡單的瀏覽器就能構造一個簡單的實時運行代碼的基於瀏覽器的前端編輯器，只需要很少代碼；
使用方法：
粘貼如下代碼到瀏覽器地址欄，（我測試了Chrome）, 即可得到這樣一個好用的編輯器。
data:text/html,<body oninput="i.srcdoc='<a href='+'\'https://www.cnblogs.com/xuyaowen/p/TinyEditor.html\''+ 'target=\'blank\''+'> xuyaowen'+'\'cnblog </a><br/>'+ h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
我們分析下其代碼：
1 data:text/html, 2 3 <body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"> 4 <style> 5 textarea, 6 iframe { 7 width: 100%; 8 height: 50% 9 } 10 11 body { 12 margin: 0 13 } 14 15 textarea { 16 width: 33.33%; 17 font-size: 18 18 } 19 </style> 20 <textarea placeholder=HTML id=h></textarea> 21 <textarea placeholder=CSS id=c></textarea> 22 <textarea placeholder=JS id=j></textarea> 23 <iframe id=i>
其構造了三個 textarea 和 一個 iframe。
body 上有個oninput 事件： oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"
我們每次在瀏覽器中輸入內容的時候，都會出發oninput, 它把 三個textarea 中 內容更新為 iframe的源碼內容。iframe把內容動態載入進去。代碼很簡單，但是作用是立竿見影的，佩服作者的腦洞。
保持更新，轉載請註明出處。
