資訊專(zhuān)欄INFORMATION COLUMN
摘要：今天在上看到一個(gè)非常巧妙的項(xiàng)目使用簡(jiǎn)單的瀏覽器就能構(gòu)造一個(gè)簡(jiǎn)單的實(shí)時(shí)運(yùn)行代碼的基于瀏覽器的前端編輯器，只需要很少代碼使用方法粘貼如下代碼到瀏覽器地址欄，我測(cè)試了即可得到這樣一個(gè)好用的編輯器。代碼很簡(jiǎn)單，但是作用是立竿見(jiàn)影的，佩服作者的腦洞。
今天在github 上看到一個(gè)非常巧妙的項(xiàng)目：umpox/TinyEditor 使用簡(jiǎn)單的瀏覽器就能構(gòu)造一個(gè)簡(jiǎn)單的實(shí)時(shí)運(yùn)行代碼的基于瀏覽器的前端編輯器，只需要很少代碼；
使用方法：
粘貼如下代碼到瀏覽器地址欄，（我測(cè)試了Chrome）, 即可得到這樣一個(gè)好用的編輯器。
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>
其構(gòu)造了三個(gè) textarea 和 一個(gè) iframe。
body 上有個(gè)oninput 事件： oninput="i.srcdoc=h.value+"
我們每次在瀏覽器中輸入內(nèi)容的時(shí)候，都會(huì)出發(fā)oninput, 它把 三個(gè)textarea 中 內(nèi)容更新為 iframe的源碼內(nèi)容。iframe把內(nèi)容動(dòng)態(tài)加載進(jìn)去。代碼很簡(jiǎn)單，但是作用是立竿見(jiàn)影的，佩服作者的腦洞。
保持更新，轉(zhuǎn)載請(qǐng)注明出處。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1929.html
閱讀 845·2023-04-25 19:43
閱讀 4110·2021-11-30 14:52
閱讀 3920·2021-11-30 14:52
閱讀 4024·2021-11-29 11:00
閱讀 3918·2021-11-29 11:00
閱讀 4036·2021-11-29 11:00
閱讀 3752·2021-11-29 11:00
閱讀 6599·2021-11-29 11:00
