一行代碼讓谷歌瀏覽器變成在線編輯器

時間 2019-11-19

原文原文鏈接

原文轉自：http://jingpin.jikexueyuan.com/article/33478.htmljavascript

這個比較好玩，或許有時能用上。php

只需在瀏覽器地址欄裏輸入一行代碼：css

data:text/html, <html contenteditable>

爲何它能奏效？
這是用了數據URI的格式（Data URI’s format），並告訴瀏覽器渲染 HTML。不過 contenteditable是 HTML5 的一個屬性，因此這個小技巧只能用於支持該屬性的現代瀏覽器。（IE 8–就不行了）html

有趣的內容還在下面
很多程序員受 Jose 的啓發，開始對這行代碼加工改造了。
● jakeonrails 童鞋改爲了一個支持 Ruby 代碼高亮的編輯器 https://gist.github.com/4666256
java

代碼：python

data:text/html, <style type="text/css">#e{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/ruby");</script>

● slawdan 提示說：若是把上面的 ace/mode/ruby 改爲 ace/mode/python，那麼就獲得了一個 Python 版的編輯器咯。其餘語言依此類推。git

● lashkari 提示說：If you URL encode the HTML, it should work in both Firefox and Chrome:程序員

data:text/html, %3Cstyle%20type%3D%22text%2Fcss%22%3E%23e%7Bposition%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bbottom%3A0%3Bleft%3A0%3B%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22e%22%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22http%3A%2F%2Fd1n0x3qji82z53.cloudfront.net%2Fsrc-min-noconflict%2Face.js%22%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cscript%3Evar%20e%3Dace.edit(%22e%22)%3Be.setTheme(%22ace%2Ftheme%2Fmonokai%22)%3Be.getSession().setMode(%22ace%2Fmode%2Fruby%22)%3B%3C%2Fscript%3E

● jdkanani 後來的補充：（2013-1-30 22:06:48 更新）github

For all browser including firefox 18 :)web

https://gist.github.com/4670615

改形成支持其餘語言語法高亮的，可把 ace/mode/ruby 替換爲：

Python -> ace/mode/python

C/C++ -> ace/mode/c_cpp

Javscript -> ace/mode/javascript

Java -> ace/mode/java

Scala -> ace/mode/scala

Markdown -> ace/mode/markdown

CoffeeScript -> ace/mode/coffee

或者其餘語法高亮：css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp,
lucene, perl, powerShell, scss, textile, xml, yaml, xquery, liquid, diff 等等…

jakeonrails 語法高亮風格用的是 monokai。

若是須要換成其餘風格，，可把 ace/theme/monokai 替換爲：

Eclipse -> ace/theme/eclipse

TextMate -> ace/theme/textmate

這些主題：xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark
等等....

● montas 的改造：You can use textarea and make it 「invisible」 if you want autofocus.

data:text/html, <textarea   autofocus />

● bgrins 的改造：編輯內容時，自動變換背景顏色；中止後變換白色。

data:text/html, <html><head><link   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  >

● fvsch 的改造：

data:text/html, <body contenteditable  >

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。