魔工坊

rock

Web工程师


发布者资料

  • 性别: 帅哥
  •  地区: 上海
  • 日期: 2015-09-01 16:11:42

教程标签云


教程分类


推荐教程


同类教程

4664

H5一行代码,即可让现代浏览器变身临时编辑器


  • 最简单的在线编辑器

  • data:text/html, <html contenteditable>
  • 有样式的编辑

  • data:text/html;charset=utf-8,<body contenteditable style="background:#ebeef2;color:black;font:18px/23px %E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91;letter-spacing:2px;padding:10px 50px" ><script>document.body.focus();document.title=%E8%B6%85%E5%93%A5%E4%B8%93%E7%94%A8%E8%AE%B0%E4%BA%8B%E6%9C%AC</script>
  • 动态背景编辑器

  • data:text/html, <html><head><link href=http://fonts.googleapis.com/css?family=Open+Sans rel=stylesheet type=text/css><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
  • 支持代码高亮的编辑器

  • data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id=%22e%22></div><script src=%22http://d1n03qji82z53.cloudfront.net/src-min-noconflict/ace.js%22 type=%22text/javascript%22 charset=%22utf-8%22></script><script>var e=ace.edit(%22e%22);e.setTheme(%22ace/theme/monokai%22);e.getSession().setMode(%22ace/mode/javascript%22);</script>

    为什么它能奏效?

     这是用了数据URI的格式(Data URI’s format),并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个新全局属性,所以这个小技巧只能用于支持该属性的现代浏览器(IE 8 – 就不行了),也可粘贴图片。


    温馨提示: 魔工坊全站已经支持前端代码直接运行

    blob.png

    -前端代码直接运行体验-


喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示