資訊專欄INFORMATION COLUMN
摘要：今天在上看到一個非常巧妙的項目使用簡單的瀏覽器就能構造一個簡單的實時運行代碼的基于瀏覽器的前端編輯器，只需要很少代碼使用方法粘貼如下代碼到瀏覽器地址欄，我測試了即可得到這樣一個好用的編輯器。代碼很簡單，但是作用是立竿見影的，佩服作者的腦洞。
今天在github 上看到一個非常巧妙的項目：umpox/TinyEditor 使用簡單的瀏覽器就能構造一個簡單的實時運行代碼的基于瀏覽器的前端編輯器，只需要很少代碼；
使用方法：
粘貼如下代碼到瀏覽器地址欄，（我測試了Chrome）, 即可得到這樣一個好用的編輯器。
data:text/html,<body oninput="i.srcdoc= xuyaowen+cnblog
+ h.value+"><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+"> 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+"
我們每次在瀏覽器中輸入內容的時候，都會出發oninput, 它把 三個textarea 中 內容更新為 iframe的源碼內容。iframe把內容動態加載進去。代碼很簡單，但是作用是立竿見影的，佩服作者的腦洞。
保持更新，轉載請注明出處。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1929.html
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
