这是最初的HTML5代码，它可以运行在最新的Chrome和Firefox中，只需在浏览器地址栏输入如下代码： 1 | data:text/html, <html contenteditable>
|
于是，网友Montas修改了他的代码，使用textarea标签代替html标签，可以添加自己喜欢的样式： 1 | data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
|
1 2 3 4 5 6 7 8 | 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;">
|
网友jecxjo希望能有存储功能： 1 | data:text/html,<button onClick="SaveTextArea()">Savebutton> <script language="javascript" type="text/javascript"> function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.value); } script> <textarea id="txtBody" style="font-size: 1.5em; width: 100%; height: 100%; boarder: none; outline: none" autofocus> textarea>
|
但上面的代码是以文件形式存储，samsonjs觉得不够方便，而且需要点击按钮，于是添加了自动保存功能： 1 | data:text/html,<html lang="en"><head><style> html,body { height: 100% } #note { width: 100%; height: 100% } style> <script> var note, html, timeout; window.addEventListener('load', function() { note = document.getElementById('note'); html = document.getElementsByTagName('html')[0]; html.addEventListener('keyup', function(ev) { if (timeout) clearTimeout(timeout); timeout = setTimeout(saveNote, 100); }); restoreNote(); note.focus(); }); function saveNote() { localStorage.note = note.innerText; timeout = null; } function restoreNote() { note.innerText = localStorage.note || ''; } script> head><body><h1>Notepad (type below, notes persist)h1> <p id="note" contenteditable="">p> body>html>
|
现在可是云时代！仅仅这样怎能让开发者止步？minikomi使用了第三方API打造了一个 在线编辑器： | 
