這是 Jose 在CoderWall 分享的一個小技巧：在瀏覽器地址欄中輸入下面這行代碼，回車即可把瀏覽器變臨時編輯器。data:text/html,

為什么它能奏效？

這是用了數據URI的格式(Data URI’s format)，并告訴瀏覽器渲染 HTML。不過 contenteditable 是 HTML5 的一個新全局屬性，所以這個小技巧只能用于支持該屬性的現代瀏覽器。IE 8 就不行了：

并非只能純文字，也可粘貼圖片。趕緊復制粘貼那行代碼，然后回車，來試試唄。

有趣的內容還在下面

不少程序員受 Jose 的啟發，開始對這行代碼加工改造了。

● jakeonrails?童鞋改成了一個支持Ruby 代碼高亮的編輯器?https://gist.github.com/4666256

代碼：

data:text/html,

var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");

slawdan?提示說：如果把上面的 ace/mode/ruby?改成ace/mode/python，那么就得到了一個 Python 版的編輯器咯。其他語言依此類推。

改造成支持其他語言語法高亮的，可把 ace/mode/ruby 替換為：

PHP -> ace/mode/php

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

其他……

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

如果需要換成其他風格，，可把 ace/theme/monokai 替換為：

Eclipse -> ace/theme/eclipse

TextMate -> ace/theme/textmate

其他……

PHP編輯器演示效果：

montas?的改造：You can use textarea and make it “invisible” if you want autofocus.

data:text/html,

bgrins?的改造：編輯內容時，自動變換背景顏色；停止后變換白色。

data:text/html,

window.οnlοad=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.οnkeydοwn=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}

fvsch?的改造：

data:text/html,

原文：http://nonfu.me/p/11161.html

總結

以上是生活随笔為你收集整理的html 编辑器 es6,小技巧：一行代码让浏览器瞬间变成临时编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。