让浏览器变身编辑器
Posted 一人浅醉-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让浏览器变身编辑器相关的知识，希望对你有一定的参考价值。
在地址栏中粘贴如下一行回车即可得到一个编辑器：
data:text/html,<html><head><title>LocalEditor</title><script src=‘https://ace.c9.io/build/src-min-noconflict/ace.js‘></script><script src=‘https://ace.c9.io/build/src-min-noconflict/ext-language_tools.js‘></script><script src=‘https://cloud9ide.github.io/emmet-core/emmet.js‘></script><script src=‘https://ace.c9.io/build/src-min-noconflict/ext-emmet.js‘></script><script src=‘https://ace.c9.io/build/src-min-noconflict/ext-language_tools.js‘></script><script src=‘http://tool.chinaz.com/template/default/js/jsformat.js‘></script><script src=‘http://tool.chinaz.com/template/default/js/htmlformat.js‘></script><style type=‘text/css‘>#editor{position:absolute;top:50px;right:0;bottom:0;left:0;}#option{background:antiquewhite;position:absolute;top:0;height:50px;font-size:0.8em;width:100%;}body{padding:0;margin:0;}select,input{margin-right:1.8em;}b{margin-right:1em;margin-left:0.5em;}kbd{background:black;color:white;border-radius:2px;margin:0 2px;padding:1px 3px;}</style></head><body><div id="option"><b>Configs:</b><label for="lang">Language:</label><select id="lang" onchange="e.getSession().setMode(‘ace/mode/‘+this.value)"><option selected value="java">java</option><option value="scala">Scala</option><option value="c_cpp">C/C++</option><option value="csharp">C#</option><option value="python">Python</option><option value="php">PHP</option><option value="ruby">Ruby</option><option value="lua">Lua</option><option value="groovy">Groovy</option><option value="pascal">Pascal</option><option value="pig">Pig</option><option value="r">R</option><option value="perl">Perl</option><option value="golang">GoLang</option><option value="erlang">Erlang</option><option value="xml">XML</option><option value="markdown">Markdown</option><option value="json">JSON</option><option value="text">Text</option><option value="plain_text">PlainText</option><option value="html">html</option><option value="javascript">Javascript</option><option value="css">CSS</option><option value="less">Less</option><option value="sass">Sass</option><option value="coffee">CoffeeScript</option><option value="haml">Haml</option><option value="haskell">Haskell</option><option value="sh">sh</option><option value="powershell">PowerShell</option><option value="jade">Jade</option><option value="jsp">JSP</option><option value="velocity">Velocity</option><option value="yaml">Yaml</option><option value="kotlin">Kotlin</option><option value="lucene">Lucene</option><option value="matlab">Matlab</option><option value="mysql">Mysql</option><option value="sql">Sql</option><option value="pgsql">PgSql</option><option value="properties">Properties</option></select><label for="theme">Theme:</label><select id="theme" onchange="e.setTheme(‘ace/theme/‘+this.value)"><option value="monokai" selected>Monokai</option><option value="eclipse">Eclipse</option><option value="textmate">TextMate</option><option value="ambiance">Ambiance</option><option value="chaos">Chaos</option><option value="chrome">Chrome</option><option value="clouds">Clouds</option><option value="github">GitHub</option><option value="terminal">Terminal</option><option value="dawn">Dawn</option><option value="twilight">Twilight</option><option value="tomorrow">Tomorrow</option><option value="tomorrow_night">Tomorrow_Night</option><option value="xcode">Xcode</option></select><label for="autoComplete">Auto Complete:</label><input id="autoComplete" type="checkbox" checked onchange="changeAutoComplete(this.checked)"><label for="wrap">AutoWrap:</label><input id="wrap" type="checkbox" checked onchange="changeWrap(this.checked)"><label for="emmet">Emmet Support:</label><input id="emmet" type="checkbox" checked onchange="changeEmmetSupport(this.checked)"><br><b>HotKey:</b><span>Save:<kbd>Ctrl+S</kbd>, Search:<kbd>Ctrl+F</kbd>, Format:<kbd>Alt+F</kbd>, Tips:<kbd>Ctrl+Shift+Space</kbd>, ShowCode:<kbd>Ctrl+R</kbd>, MultiChoose:<kbd>Ctrl+MouseLeft</kbd>, MultiLines:<kbd>Alt+MouseLeft</kbd></span></div><div id="editor"></div><script>ace.require(‘ace/ext/language_tools‘);var e=ace.edit(‘editor‘);init();function init(){var lang=document.getElementById("lang").value;var theme=document.getElementById("theme").value;var autoComplete=document.getElementById("autoComplete").checked;var autoWrap=document.getElementById("wrap").checked;var emmet=document.getElementById("emmet").checked;e.setTheme(‘ace/theme/‘+theme);e.setOption(‘enableEmmet‘,emmet);e.setOptions({‘enableBasicAutocompletion‘:autoComplete,‘enableLiveAutocompletion‘:autoComplete});e.getSession().setMode(‘ace/mode/‘+lang);e.getSession().setUseWrapMode(autoWrap);e.getSession().setUseSoftTabs(true);er.setHighlightActiveLine(true);}function changeAutoComplete(autoComplete){e.setOptions({‘enableBasicAutocompletion‘:autoComplete,‘enableLiveAutocompletion‘:autoComplete});}function changeWrap(wrap){e.getSession().setUseWrapMode(wrap);}function changeEmmetSupport(emmetSupport){e.setOption(‘enableEmmet‘,emmetSupport);}document.onkeydown=function(k){if(k.ctrlKey==true && k.keyCode==83){window.location=‘data:application/octet-stream,‘+k.getValue();return false;}if(k.altKey==true && k.keyCode==70){js_source=(k.getValue()).replace(/^\s+/,‘‘);tabsize=1;tabchar=‘\t‘;if(js_source && js_source.charAt(0)=== ‘<‘){k.setValue(style_html(js_source,tabsize,tabchar,80));}else{k.setValue(js_beautify(js_source,tabsize,tabchar));}return false;}if((k.ctrlKey==true || k.altKey==true)&& k.keyCode==82){runEx();return false;}};function runEx(){var code=e.getValue();if(code != ‘‘){var newwin=window.open(‘‘,‘‘,‘‘);newwin.opener=null;newwin.document.write(code);newwin.document.close();}} </script></body></html>
以上是关于让浏览器变身编辑器的主要内容，如果未能解决你的问题，请参考以下文章