How to turn browser into editor-JS Tutorial-php.cn

How to turn browser into editor

php中世界最好的语言

Release： 2018-03-08 13:50:26

Original

2277 people have browsed it

This time I will bring you how to turn the browser into an editor, and what are the things to note. The following is a practical case, let’s take a look.

Copy the code directly into the browser: paste it and use it. Of course, you can also save it to your favorites (provided there is an Internet connection)

Shortcut keys: Ctrl+F Search Alt+F Format
Ctrl+Shift+Space displays prompts
Ctrl+Left mouse button can select multiple lines
Alt+Click the left mouse button and move to select multiple lines
Ctrl+S Download code (need to enter a suffix)
Ctrl+ R enters the browser and supports emmet.
I am using the Chrome browser. I have not tested other browsers. There are others I have not mentioned. If you are interested, you should research it yourself!
----The save function may not be perfect yet. In my case, I mainly use Ctrl+R to enter the browser. I usually look at other people’s codes. Then if I want to see the effect, just click on the link and copy the code into it, then Ctrl+R.

data:text/html, <style type=&#39;text/css&#39;> #e{position:absolute;top:0;right:0;bottom:0;left:0;}</style> <div id=&#39;e&#39;></div> <script src=&#39;https://ace.c9.io/build/src-min-noconflict/ace.js&#39; type=&#39;text/javascript&#39; charset=&#39;utf-8&#39;></script> <script src=&#39;https://ace.c9.io/build/src-min-noconflict/ext-language_tools.js&#39;></script> <script src=&#39;https://cloud9ide.github.io/emmet-core/emmet.js&#39; type=&#39;text/javascript&#39; charset=&#39;utf-8&#39;></script> <script src=&#39;https://ace.c9.io/build/src-min-noconflict/ext-emmet.js&#39; type=&#39;text/javascript&#39; charset=&#39;utf-8&#39;></script> <script src=&#39;https://ace.c9.io/build/src-min-noconflict/ext-language_tools.js&#39;></script> <script> var e=ace.edit(&#39;e&#39;); e.setTheme(&#39;ace/theme/monokai&#39;); e.getSession().setMode(&#39;ace/mode/html&#39;); e.setOption(&#39;enableEmmet&#39;, true); ace.require(&#39;ace/ext/language_tools&#39;); e.setOption(&#39;enableLiveAutocompletion&#39;,true); e.setOptions({enableBasicAutocompletion: true}); e.getSession().setUseWrapMode(true); function SaveTextArea() { window.location = &#39;data:application/octet-stream,&#39; + e.getValue(); }; function do_js_beautify() { js_source = (e.getValue()).replace(/^\s+/, &#39;&#39;); tabsize =1; tabchar = &#39;\t&#39;; if (js_source && js_source.charAt(0) === &#39;<&#39;) { e.setValue(style_html(js_source, tabsize, tabchar, 80)); } else { e.setValue(js_beautify(js_source, tabsize, tabchar)); }; return false; }; document.onkeydown = function(e){ if( e.ctrlKey == true && e.keyCode == 83 ){ SaveTextArea(); return false; }; if(e.altKey == true &&e.keyCode ==70){ do_js_beautify(); return false; }; if(e.ctrlKey == true &&e.keyCode ==82){ runEx(); return false; }; if(e.altKey == true &&e.keyCode ==82){ runEx(); return false; }; }; function runEx() { var code=e.getValue(); if (code!=&#39;&#39;){ var newwin=window.open(&#39;&#39;,&#39;&#39;,&#39;&#39;); newwin.opener = null ; newwin.document.write(code); newwin.document.close(); }; }; </script> <script src=&#39;http://tool.chinaz.com/template/default/js/jsformat.js&#39;></script> <script src=&#39;http://tool.chinaz.com/template/default/js/htmlformat.js&#39;></script>

Copy after login

How to turn browser into editor

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!