Data URI是由RFC 2397 ACE
https://www.rfc-editor.org/rfc/rfc2397
http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/https://ace.c9.io/build/kitchen-sink.html
https://c9.io/
https://angular-ui.github.io/
data:text/html, <html contenteditable>The "data" URL scheme Status of this Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited. Copyright Notice Copyright (C) The Internet Society (1998). All Rights Reserved. 1. Abstract A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" data, as if it had been included externally. 2. Description Some applications that use URLs also have a need to embed (small) media type data directly inline. This document defines a new URL scheme that would work like 'immediate addressing'. The URLs are of the form: data:[<mediatype>][;base64],<data>
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;charset=utf-8,%20<title>TextEditor</title>%20<link%20rel="shortcut%20icon"%20href="http://g.etfv.co/https://docs.google.com"/>%20<style>%20html{height:%20100%;}%20body{background:%20-webkit-linear-gradient(#f0f0f0,%20#fff);%20padding:%203%;%20height:%2094%;}%20.paper%20{%20font:%20normal%2012px/1.5%20"Lucida%20Grande",%20arial,%20sans-serif;%20width:%2050%;%20height:%2080%;%20margin:%200%20auto;%20padding:%206px%205px%204px%2042px;%20position:%20relative;%20color:%20#444;%20line-height:%2020px;%20border:%201px%20solid%20#d2d2d2;%20background:%20#fff;%20background:%20-webkit-gradient(linear,%200%200,%200%20100%,%20from(#d9eaf3),%20color-stop(4%,%20#fff))%200%204px;%20background:%20-webkit-linear-gradient(top,%20#d9eaf3%200%,%20#fff%208%)%200%204px;%20background:%20-moz-linear-gradient(top,%20#d9eaf3%200%,%20#fff%208%)%200%204px;%20background:%20-ms-linear-gradient(top,%20#d9eaf3%200%,%20#fff%208%)%200%204px;%20background:%20-o-linear-gradient(top,%20#d9eaf3%200%,%20#fff%208%)%200%204px;%20background:%20linear-gradient(top,%20#d9eaf3%200%,%20#fff%208%)%200%204px;%20-webkit-background-size:%20100%%2020px;%20-moz-background-size:%20100%%2020px;%20-ms-background-size:%20100%%2020px;%20-o-background-size:%20100%%2020px;%20background-size:%20100%%2020px;%20-webkit-border-radius:%203px;%20-moz-border-radius:%203px;%20border-radius:%203px;%20-webkit-box-shadow:%200%201px%202px%20rgba(0,0,0,0.07);%20-moz-box-shadow:%200%201px%202px%20rgba(0,0,0,0.07);%20box-shadow:%200%201px%202px%20rgba(0,0,0,0.07);%20}%20.paper::before%20{%20content:%20'';%20position:%20absolute;%20width:%204px;%20top:%200;%20left:%2030px;%20bottom:%200;%20border:%201px%20solid;%20border-color:%20transparent%20#efe4e4;%20}%20textarea{display:%20block;%20width:94%;margin:0%20auto;padding:3.8%%203%;%20border:%20none;%20outline:%20none;%20height:%2094%;%20background:%20transparent;%20line-height:%2020px;}%20</style>%20<body%20spellcheck="false">%20<div%20class="paper">%20<textarea%20autofocus="autofocus"></textarea>%20</div>%20</body>%20</html>
data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>
评论
发表评论