Menu

讓瀏覽器瞬間變成文字編輯器的方法

當臨時需要時，我們都使用記事本來編輯一些代碼片段，想法，或部落格內容與待辦事項。最近我才知道，我們可以用我們的瀏覽器當成記事本。用 data URI 和html contenteditable屬性即可。

所有你需要做的是到瀏覽器的地址欄輸入下面的代碼：

data:text/html, <html contenteditable>

它會讓你的頁面就像記事本一樣能編輯。如果您希望您的內容可以被保存，用 Ctril+S即可將您的內容保存為HTML文件。

 

分享這篇文章後，我在Hacker News上看到很酷的新東西。

編輯點點風格

data:text/html, <html contenteditable><style>body {color: #333; width: 960px; margin: 0 auto; display: block; height: 100%; font-size: 36px; padding: 20px;}</style></html>
reply

 

改變背景顏色的主題

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;">

 

我喜歡這個。用 ACE Editor 的版本

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

 

Web is awesome. Have a nice day.