摘要：今天在上看到一个非常巧妙的项目使用简单的浏览器就能构造一个简单的实时运行代码的基于浏览器的前端编辑器，只需要很少代码使用方法粘贴如下代码到浏览器地址栏，我测试了即可得到这样一个好用的编辑器。代码很简单，但是作用是立竿见影的，佩服作者的脑洞。
今天在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把内容动态加载进去。代码很简单，但是作用是立竿见影的，佩服作者的脑洞。
保持更新，转载请注明出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1929.html
阅读 682·2023-04-25 19:43
阅读 3855·2021-11-30 14:52
阅读 3729·2021-11-30 14:52
阅读 3795·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3812·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6009·2021-11-29 11:00
