zoukankan      html  css  js  c++  java
  • 让浏览器变成编辑器的方法

    让浏览器变成记事本和快捷编辑器,复制代码到地址框即可

    一、可根据打字情况改变背景颜色

    data:text/html, <html><head><link href=&#039;http://fonts.googleapis.com/css?family=Open+Sans&#039; rel=&#039;stylesheet&#039; type=&#039;text/css&#039;><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 style="font-size:2rem;line-height:1.4;max-60rem;margin:0 auto;padding:4rem;">

    二、变成html编辑器

    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 = '	'; 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>
    有错误的请多多指教,共同进步(๑•ᴗ•๑)
    By听雨的人
  • 相关阅读:
    python 遍历目录 正则
    (含PPT)MySQL托管服务架构及读写分离的优化
    jquery 将一维数组分配给下拉菜单
    kafka安装和使用
    How to search Installed Updates
    How to search Installed Updates
    How to search Installed Updates
    How to search Installed Updates
    复旦软件工程专业课
    复旦软件工程专业课
  • 原文地址:https://www.cnblogs.com/GoCircle/p/5806170.html
Copyright © 2011-2022 走看看