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低版本是 ...
随机推荐
- 一筐鸡蛋的lcm
问题 一筐鸡蛋,一个一个取正好取完,两个两个取剩下一个,三个三个取正好取完,四个四个取剩下一个,五个五个取少一个,六个六个取剩下三个,七个七个取正好取完,八个八个取剩下一个,九个九个取正好取完,共多少 ...
- odoo开发笔记 -- 字段增加唯一约束
前台违反约束效果: 后台模型中定义代码: name = fields.Char(string="Name", copy=False) # 流水号 _sql_constraints ...
- EL表达式报错： According to TLD or attribute directive in tag file, attribute value does not accept any expressions
EL表达式报错: According to TLD or attribute directive in tag file, attribute value does not accept any ex ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- AI时代的OCR识别技术浅析
人工智能这个词可谓是耳熟能详,近几年人工智能热潮再次席卷而来,引起轰动的要数google的AlphaGo,相继打败了围棋界的韩国选手李世石以及世界冠军柯洁,见证了人工智能发展的里程碑式的变革,人工智能 ...
- Python程序每日一练习
问题一:做为Apple Store App独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用Python如何生成200个激活码(或者优惠券)? 简介:通用唯一识别码(英语:Unive ...
- 微信公众平台.net HttpClient 异步客户端
微信公众平台.net HttpClient 异步客户端 该客户端实现了对微信公众平台的后台管理,包括获取Token,发生客服消息(文本,图片,语音,视频),自定义菜单的创建,查询,删除,查询订阅用户, ...
- python——文件读写
open()函数用法: file-object = open(file_name, access_mode = ' ', buffering = -1) filename可以是相对路径或绝对路径,ac ...
- S5PV210 串口实验(中断方式)
结合之前的串口实验(轮询方式)与中断体系分析,我们来做下中断方式的串口接收实验. start.S .global _start .global IRQ_handle _start: /* 关 Watc ...
- vue-cli+webpack项目，修改项目名称
使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...