TinyEditor
今天在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>
我们分析下其代码：
data:text/html, <body oninput="i.srcdoc=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>
其构造了三个 textarea 和 一个 iframe。
body 上有个oninput 事件： oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"
我们每次在浏览器中输入内容的时候，都会出发oninput, 它把 三个textarea 中 内容更新为 iframe的源码内容。iframe把内容动态加载进去。代码很简单，但是作用是立竿见影的，佩服作者的脑洞。
保持更新，转载请注明出处。
TinyEditor的更多相关文章
- tinymce整合struts2使用
在提交之前记得 instance.post(); 这个应付老师检查还是可以的,但是很详细的怎么具体使用,还是要去看官方文档. <%@ page language="java" ...
- 7款HTML5的精美应用教程让你立即爱上HTML5
1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示 源码下载 2, ...
- JQuery轻量级网页编辑器 选中即可编辑
目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比 较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...
- Php开源项目大全
WordPress [PHP开源 博客Blog] WordPress是最热门的开源个人信息发布系统(Blog)之一,基于PHP+MySQL构建.WordPress提供的功能包括: 1.文章发布.分类 ...
- Surface pro 4 使用心得
今天谈谈这几个月Surface pro 4的使用心得.这篇后面有点跑题,行文也比较随意,就当闲笔了. 设备简述 使用体验 优点 不足 优雅使用 系统界面 应用 系统应用 工具应用 生产工具 其他应用 ...
- Django（九）下：Ajax操作、图片验证码、KindEditor使用
三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...
- python学习笔记_week24
note 内容回顾: Model - 数据库操作 on_delete Query_set select_related 跨表数据一次性拿过来,不增加sql查询次数.帮助跨表,后面参数只能加连表字段 f ...
- Python3.5 学习二十四
本节课程大纲: -------------------------------------------------------------------------------------------- ...
- Day24-Ajax操作、图片验证码、KindEditor使用-转
参考源:http://blog.csdn.net/fgf00/article/details/54917439 三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是 ...
随机推荐
- OPC安装-配置（http://www.mabotech.com）
1.使用opc,需要在机器上安装OPC运行环境.opc运行环境包含:opc_aeps.dll.opccomn_ps.dll.opcdaauto.dll.OpcEnum.exe.opcproxy.dll ...
- Java NIO中的通道Channel（二）分散/聚集 Scatter/Gather
什么是Scatter/Gather scatter/gather指的在多个缓冲区上实现一个简单的I/O操作,比如从通道中读取数据到多个缓冲区,或从多个缓冲区中写入数据到通道: scatter(分散): ...
- MapReduce－深度剖析
1.概述 在接触了第一代MapReduce和第二代MapReduce之后,或许会有这样的疑惑,我们从一些书籍和博客当中获取MapReduce的一些原理和算法,在第一代当中会有JobTrack,Task ...
- Windows环境下安装RocketMQ
一.预备环境1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署1.下载1.1地址:http://rocketmq.apache.org/release_ ...
- 深入理解kafka设计原理
最近开研究kafka,下面分享一下kafka的设计原理.kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息,并需要能够支撑较大的数据量,且具备良好的容错能力. 1.持久性 k ...
- MAC ACL、RACL和VACL
拓扑结构: 配置IP地址.VLAN及路由: SW1(config)#int range f0/1 - 2SW1(config-if-range)#switchport mode accessSW1(c ...
- IIS部署wordpress4.7.4
准备环境和安装包:win7操作系统 iis php7.1.6 wordpress4.7.4 1.安装iis,需要cgi模块,一般安装建议全部勾选上. 2.安装配置php7.1.6 在官网http ...
- JAVA中的集合容器操作类
目录 JAVA中的集合容器操作类 List集合 ArrayList的操作方法说明 LinkedList Stack Set Map Queue 总结 JAVA中的集合容器操作类 Java容器类库总共分 ...
- 本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动
重新安装MySQL数据库,由于安装的时候马虎,一路next(事实上,某些地方需要严格的配置,我忘记注意了),导致现在出了很多麻烦. 错误信息: 本地计算机上的MySQL服务启动后停止.某些服务在未由其 ...
- Tomcat报failed to parse the expression [${xxx}]异常（javax.el.ELException）的解决方法
Tomcat 7 'javax.el.ELException' 的解决方式tomcat 7对EL表达式的语法要求比较严格,例如"${owner.new}"因包含关键字new就会导致 ...