今天在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. 七:理解控件的运行机制(例:基于CompositeControl命名空间的控件)

    组合控件与WebControl控件的事件和属性相差不大组合控件,顾名思义就是把一些控件组合起来形成一个控件这个控件将包含这些控件称为他的子控件 CompositeControl类实现了INameCon ...

  2. Java 面试基础总结（一）

    1.九种基本数据类型的大小以及它们的封装类 java提供的九种基本数据类型:boolean.byte(1).char(2).short(2).int(4).long(8).float(4).doubl ...

  3. server下apache2.4.*虚拟主机配置Forbidden You don't have permission to access / on this server.

    前言: 继前面两节笔记之后,在配置一个虚拟主机时,这中间却遇见了一个问题,这里需要描述做一下笔记,刚刚安装的是Ubuntu server,apt-get下来的apache的版本是2.4.7,之前一直用 ...

  4. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

  5. js a标签 + ajax 多参数穿参

    <span onclick="return haoping('{$row['jv_id']}','1')"> function haoping(id,type){ $. ...

  6. Nullable<System.DateTime>日期格式转换 （转载）

    一.问题 1.html页面中时间显示出错,数据库中时间是正确的. 原因:没有把DateTime转成String类型. 2.  在C#中,发现不能直接使用ToString("yyyy-MM-d ...

  7. 深入理解RDD原理

    首先我们来了解一些Spark的优势:1.每一个作业独立调度,可以把所有的作业做一个图进行调度,各个作业之间相互依赖,在调度过程中一起调度,速度快.2.所有过程都基于内存,所以通常也将Spark称作是基 ...

  8. 【ajax】1、ajax原理

    Ajax核心XMLHttpRequest对象 XMLHttpRequest对象方法 XMLHttpRequest对象属性 onreadystatechange 状态改变的事件触发器.每次 readyS ...

  9. 性能监控(1)--linux下的top命令

    Linux下的监控工具 top命令 top命令能够实时显示系统中各个进程的资源占用情况,其输出信息分为两部分,前半部分为系统统计信息,后半部分是进程信息. 第一行是任务队列信息,它的结果等同于upti ...

  10. potplayer打开多个视频文件

    选项-基本-多重处理方式-新开一个播放进程播放