今天在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的更多相关文章

  1. tinymce整合struts2使用

    在提交之前记得 instance.post(); 这个应付老师检查还是可以的,但是很详细的怎么具体使用,还是要去看官方文档. <%@ page language="java" ...

  2. 7款HTML5的精美应用教程让你立即爱上HTML5

    1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示 源码下载 2, ...

  3. JQuery轻量级网页编辑器 选中即可编辑

    目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比 较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...

  4. Php开源项目大全

    WordPress  [PHP开源 博客Blog] WordPress是最热门的开源个人信息发布系统(Blog)之一,基于PHP+MySQL构建.WordPress提供的功能包括: 1.文章发布.分类 ...

  5. Surface pro 4 使用心得

    今天谈谈这几个月Surface pro 4的使用心得.这篇后面有点跑题,行文也比较随意,就当闲笔了. 设备简述 使用体验 优点 不足 优雅使用 系统界面 应用 系统应用 工具应用 生产工具 其他应用 ...

  6. Django（九）下：Ajax操作、图片验证码、KindEditor使用

    三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...

  7. python学习笔记_week24

    note 内容回顾: Model - 数据库操作 on_delete Query_set select_related 跨表数据一次性拿过来,不增加sql查询次数.帮助跨表,后面参数只能加连表字段 f ...

  8. Python3.5 学习二十四

    本节课程大纲: -------------------------------------------------------------------------------------------- ...

  9. Day24-Ajax操作、图片验证码、KindEditor使用-转

    参考源:http://blog.csdn.net/fgf00/article/details/54917439 三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是 ...

随机推荐

  1. Python学习的路上，Anaconda送你一双遮天神翼

    一.背景 ​ 最近在学习python,发现在本地搭建python环境的时候,要是想要同时搭建不同python版本的环境,就比较麻烦,很容易就出现冲突了,很是头疼.然后光明就出现这山重水复疑无路的时候, ...

  2. Apache Commons Beanutils 一 （使用PropertyUtils访问Bean属性）

    BeanUtils简要描述 beanutils,顾名思义,是java bean的一个工具类,可以帮助我们方便的读取(get)和设置(set)bean属性值.动态定义和访问bean属性: 细心的话,会发 ...

  3. ACM学习<一>

    c++指针|指针入门 什么是指针? 其实指针就像是其它变量一样,所不同的是一般的变量包含的是实际的真实的数据,而指针是一个指示器,它告诉程序在内存的哪块区域可以找到数据.这是一个非常重要的概念,有很多 ...

  4. 数字对讲系统开发札记（前端linux c 后端 c#）

    前言 数字化是一种趋势,特别是在“提速降费”的大环境下,这种趋势愈发明显.对讲机这种古老的系统也处在时代的变革之中,虽然手机的功能越来越强,让人怀疑对讲机是否还有存在的必要.诚然,对讲机仍然有它的市场 ...

  5. 【Shell实战】定期清理日志文件的shell脚本

    功能描述:清理/var/log/路径下的messages历史日志文件(messages-date),但不清理messages文件本身 依赖要求:服务器上安装了bc模块 # clean_logs.sh ...

  6. 图像处理中kmeans聚类算法C++实现

    Kmeans聚类算法是十分常用的聚类算法,给定聚类的数目N,Kmeans会自动在样本数据中寻找N个质心,从而将样本数据分为N个类别.下面简要介绍Kmeans聚类原理,并附上自己写的Kmeans聚类算法 ...

  7. Linux 命令行下光标移动快捷键

    常用的快捷键: Ctrl + u 删除光标之前到行首的字符 Ctrl + k 删除光标之后到行尾的字符 Ctrl + a 光标移动到行首 Ctrl + e 光标移动到行尾 Ctrl + l 清屏 Al ...

  8. U盘基本处理，U盘与移动固态硬盘

    一.辨别 USB2.0 和 USB3.0 1.从USB外观上来看,USB2.0通常是白色或黑色,而USB3.0则改观为“高大上”的蓝色接口. 目前,部分笔记本电脑USB接口,已同时提供对USB2.0及 ...

  9. webstrom vue项目让局域网访问

    vue项目package.json "dev": "webpack-dev-server --inline --progress --config build/webpa ...

  10. 通过swagger将API业务版本号与Gitlab代码版本号绑定

    1.调用Gitlab API获取项目commit ID 2.编辑 Swagger2.java @Configuration @EnableSwagger2 @EnableWebMvc public c ...