TinyEditor

2018-08-13 07:44:25来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

今天在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把内容动态加载进去。代码很简单,但是作用是立竿见影的,佩服作者的脑洞。

 

保持更新,转载请注明出处。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css属性(常用属性整理)

下一篇:marquee标签的使用