标签：oninput ref 使用方法 frame https bsp pre targe col
今天在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把内容动态加载进去。代码很简单，但是作用是立竿见影的，佩服作者的脑洞。
保持更新，转载请注明出处。
标签：oninput ref 使用方法 frame https bsp pre targe col
原文地址：https://www.cnblogs.com/xuyaowen/p/TinyEditor.html
