今天在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. Difference Between Session.run and Tensor.eval

    [Question]: TensorFlow has two ways to evaluate part of graph: Session.run on a list of variables an ...

  2. [转]idea导入eclipse的web项目

    https://www.cnblogs.com/xiaoBlog2016/archive/2017/05/08/6825014.html 一.导入自己的web项目 步骤:File->New-&g ...

  3. mysql 开发进阶篇系列 41 mysql日志之慢查询日志

    一.概述 慢查询日志记录了所有的超过sql语句( 超时参数long_query_time单位 秒),获得表锁定的时间不算作执行时间.慢日志默认写入到参数datadir(数据目录)指定的路径下.默认文件 ...

  4. PyCharm的基本快捷键和配置简介

    快捷键 1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctr ...

  5. AutoCAD 凸度（bulge）的概念及使用WPF函数画图

    前言  凸度(bulge)是AutoCAD 中一个非常重要的概念,凸度控制着两点之间弧度大小,弧度的方向.各种复杂的图像有可能就是成百上千的弧线组成的.从AutoCAD中导出的数据也有该值,一般的形式 ...

  6. SQL 必知必会·笔记<6>使用数据处理函数

     与SQL 语句不一样,SQL 函数不是可移植的.为特定SQL 实现编写的代码在其他实现中可能不正常.因为各个DBMS厂商对函数的实现有很大的区别. 常用函数 大多数SQL 实现支持以下类型的函数: ...

  7. Zuul过滤器

    1.Zuul过滤器生命周期Zuul大部分功能都是通过过滤器来实现的,Zuul定义了4种标准的过滤器类型,这些过滤器类型对应于请求的典型生命周期.a.pre: 这种过滤器在请求被路由之前调用.可利用这种 ...

  8. 光盘作为yum源

    1.挂载光盘 mkdir /media/cdrom       //在/media下建立cdrom目录,默认情况是没有的  mount /dev/cdrom /mnt/cdrom2.进入 /etc/y ...

  9. ASP.NET MVC 5 Authentication Breakdown

    In my previous post, "ASP.NET MVC 5 Authentication Breakdown", I broke down all the parts ...

  10. C# GDI+编程之剖析startAngle和sweepAngle

    以DrawArc为例,它有一种形式如下的构造函数 public void DrawArc(Pen pen, Rectangle rect, float startAngle, float sweepA ...