这次给大家带来怎样让浏览器变成编辑器,让浏览器变成编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。
直接复制代码到浏览器:粘贴就可以用了,当然也可以保存到自己的收藏夹里(前提是有网)
快捷键:ctrl+f 搜索 alt+f 格式化
ctrl+shift+空格显示提示
ctrl+鼠标左键可以多选
alt+点击鼠标左键后移动 选择多行
ctrl+s下载代码(需要输入后缀)
ctrl+r进入浏览 支持emmet 。
我用的是chrome浏览器,其他浏览器没测试过,还有其他的我没提到,有兴趣还是自己研究吧!
----保存功能的话可能还不完善,我的话主要 还是 使用ctrl+r进入浏览,平时看看别人代码,然后要看效果就直接点开连接吧代码复制进去,然后ctrl+r
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='https://ace.c9.io/build/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'></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' type='text/javascript' charset='utf-8'></script> <script src='https://ace.c9.io/build/src-min-noconflict/ext-emmet.js' type='text/javascript' charset='utf-8'></script> <script src='https://ace.c9.io/build/src-min-noconflict/ext-language_tools.js'></script> <script> var e=ace.edit('e'); e.settheme('ace/theme/monokai'); e.getsession().setmode('ace/mode/html'); e.setoption('enableemmet', true); ace.require('ace/ext/language_tools'); e.setoption('enableliveautocompletion',true); e.setoptions({enablebasicautocompletion: true}); e.getsession().setusewrapmode(true); function savetextarea() { window.location = 'data:application/octet-stream,' + e.getvalue(); }; function do_js_beautify() { js_source = (e.getvalue()).replace(/^\s+/, ''); tabsize =1; tabchar = '\t'; if (js_source && js_source.charat(0) === '<') { 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!=''){ var newwin=window.open('','',''); newwin.opener = null ; newwin.document.write(code); newwin.document.close(); }; }; </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>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
最简介的带图标的搜索框
js可以截取video的标签视频缩略图吗?
以上就是怎样让浏览器变成编辑器的详细内容。
