今天在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. 14-03 java BigInteger类，BigDecimal类，Date类，DateFormat类，Calendar类

    BigInteger类 发 package cn.itcast_01; import java.math.BigInteger; /* * BigInteger:可以让超过Integer范围内的数据进 ...

  2. Pthon常用模块之requests，urllib和re

    urllib Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了. 它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务, 下面是简单的使用urllib来 ...

  3. 使用SonarCloud对.NET Core项目进行静态代码分析

    本文将介绍如何使用SonarCloud进行.NET Core项目的静态代码分析.SonarCloud是SonarQube提供的基于云的版本,特别针对于开源项目是免费的. 首先,在sonarcloud. ...

  4. PostgreSQL Json字段作为查询条件案例

    业务扩展字段在数据库中经常会使用json格式的数据来存储,这就涉及到一个头疼的问题,假设要使用扩展字段里的某个值作为查询条件怎么办,原来PostgreSQL本身就支持这种查询方式. 例子:假设业务扩展 ...

  5. thinkphp常用标签总结

    三元运算标签 {$v['member_id'] == 1 ? 正常 : 不正常} volist标签 <volist name="data" id="v"& ...

  6. c# 读取xml 某个节点值

    一.xml格式如下: <?xml version="1.0" encoding="UTF-8"?><Freight> <freig ...

  7. [css] css3 中的新特性加强记忆

    css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webki ...

  8. Flask在Pycharm开启调试模式

       一.Flask在Pycharm2018前的版本只需设置(两种方法之一): 1. 直接设置app的debug为true: app.debug=true 2. 把debug=true作为参数,传入到 ...

  9. java基础之XML

    目录 java基础之XML 1. XML解析概述 2. DOM4J介绍 2.1 常用包 2.2 内置元素 2.2 Element类 2.3 Attribute类 2.4 常用操作 3. 代码演示 3. ...

  10. C#设计模式六大原则概述

    在面向对象的设计中,我们应当遵循以下六大原则,只有掌握了这些原则,才能更好的理解设计模式. 1:单一职责原则(Single Responsibility Principle 简称 :SRP) : 就一 ...