只有168字节的在线代码编辑器 youran · Posted on 2013/12/202014/12/06 最近在网上发现了一个超级精简的在线HTML/CSS/Javascript编辑器，简洁版的代码只有168字节，可谓短小精悍。 最精简版的代码如下： </pre> </p> <p><span style="font-size: 13px;">完整版(也就是背景里多了些提示，好看点)代码如下：</span></p> <p><pre lang="html4strict"><body onkeyup='l.hash=[j=t1[v="value"],c=t2[v],h=t3[v]].map(btoa);(D=e.firstChild.contentWindow.document).write(h||c||j?h+"<script>"+j+"</script><style>"+c:"<pre>Result");D.close()'onload='for(i=4;--i;e.innerHTML+="<textarea id=t"+i+" placeholder="+[,"JS","CSS","HTML"][i]+" rows=9>"+atob([l.hash.split(/#|,/)[i]]))l=location;e.onkeyup()'id=e><iframe></pre> </p> <p>可以将上述代码分别拷贝到空白htm文件里，用firefox/chrome打开试试效果吧！</p> <p>给个示例：<br /> <a href="http://wordpress.youran.me/wp-content/uploads/2013/12/168-bytes-editor-ex.png" data-slb-active="1" data-slb-asset="882784199" data-slb-internal="0" data-slb-group="452"><img fetchpriority="high" decoding="async" class="wp-image-453 alignnone" alt="168-bytes-editor-ex" src="http://wordpress.youran.me/wp-content/uploads/2013/12/168-bytes-editor-ex-1024x197.png" width="614" height="118" srcset="https://wordpress.youran.me/wp-content/uploads/2013/12/168-bytes-editor-ex-1024x197.png 1024w, https://wordpress.youran.me/wp-content/uploads/2013/12/168-bytes-editor-ex-300x57.png 300w, https://wordpress.youran.me/wp-content/uploads/2013/12/168-bytes-editor-ex.png 1217w" sizes="(max-width: 614px) 100vw, 614px" /></a></p> <p> </p> <p>注意上面那两段代码只支持比较新的浏览器，最新版的firefox/chrome之类肯定没问题，而IE不行(IE11都不行，悲剧的IE)。试了一下和我常用的JSFiddle功能有点像，可以实时显示结果画面，用来调试web挺方便。</p> <div style="margin-top: 15px; font-style: italic"> <p><strong>本文为</strong><a href="https://wordpress.youran.me/">悠然居(https://wordpress.youran.me/)</a><strong>的原创文章，转载请注明出处！</strong></p> </div> </div><!-- .entry-content --> </article> <div class="entry-meta cat-and-tags"> <div id="categories"><span class="icon-archive"></span> <p><a href="https://wordpress.youran.me/category/software/" rel="category tag">Software</a></p></div> </div> </div><!-- #primary --> <div class="row"> <div class="large-7 medium-8 small-11 small-centered columns"> <div id="comments" class="comments-area"> <h2 class="comments-title"> One thought on “只有168字节的在线代码编辑器” </h2> <ol class="comment-list"> <li id="comment-400" class="comment even thread-even depth-1"> <article id="div-comment-400" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <b class="fn"><a href="http://argcv.com" class="url" rel="ugc external nofollow">Yu</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://wordpress.youran.me/168-bytes-online-editor/#comment-400"><time datetime="2014-01-01T19:17:14+08:00">2014/01/01 at 7:17 PM</time></a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>新年快乐！</p> <div class='wp-useragent'> <img src='https://wordpress.youran.me/wp-content/plugins/wp-useragent/img/16/net/chrome.png' title='Google Chrome 31.0.1650.63' style="border:0px;vertical-align:middle;" alt='Google Chrome 31.0.1650.63' height='16' width='16'> Google Chrome 31.0.1650.63 <img src='https://wordpress.youran.me/wp-content/plugins/wp-useragent/img/16/os/linux.png' title='GNU/Linux x64' style="border:0px;vertical-align:middle;" alt='GNU/Linux x64' height='16' width='16'> GNU/Linux x64</div> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='https://wordpress.youran.me/168-bytes-online-editor/?replytocom=400#respond' data-commentid="400" data-postid="452" data-belowelement="div-comment-400" data-respondelement="respond" data-replyto="Reply to Yu" aria-label='Reply to Yu'>Reply</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> </ol><!-- .comment-list --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/168-bytes-online-editor/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://wordpress.youran.me/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea onkeydown="gcllCounter(this)" onkeyup="gcllCounter(this)" id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit button" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='452' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="e09a3bbebf" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="11"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond --> </div><!-- .comments-area --> </div> </div> </div> <!-- #container --> <footer id="site-footer" > <div id="footer-widget-area" class="row widget-area footer-widget-area"> <div class="large-up-4 medium-up-2 column"> <aside id="categories-4" class="column widget footer-widget widget_categories"><h2 class="widget-title widget-title-bottom">Categories</h2> <ul> <li class="cat-item cat-item-149"><a href="https://wordpress.youran.me/category/hardware/">Hardware</a> </li> <li class="cat-item cat-item-3"><a href="https://wordpress.youran.me/category/linux/">Linux</a> </li> <li class="cat-item cat-item-6"><a href="https://wordpress.youran.me/category/mac-os-x/">Mac OS X</a> </li> <li class="cat-item cat-item-5"><a href="https://wordpress.youran.me/category/misc/">Misc</a> </li> <li class="cat-item cat-item-15"><a href="https://wordpress.youran.me/category/networking/">Networking</a> </li> <li class="cat-item cat-item-166"><a href="https://wordpress.youran.me/category/programming/">Programming</a> </li> <li class="cat-item cat-item-108"><a href="https://wordpress.youran.me/category/router/">Router</a> </li> <li class="cat-item cat-item-197"><a href="https://wordpress.youran.me/category/security/">Security</a> </li> <li class="cat-item cat-item-50"><a href="https://wordpress.youran.me/category/software/">Software</a> </li> <li class="cat-item cat-item-4"><a href="https://wordpress.youran.me/category/windows/">Windows</a> </li> </ul> </aside> <aside id="recent-posts-4" class="column widget footer-widget widget_recent_entries"> <h2 class="widget-title widget-title-bottom">Recent Posts</h2> <ul> <li> <a href="https://wordpress.youran.me/reclaim-kdump-memory/">禁用kdump，找回被Centos 8多占用的内存</a> </li> <li> <a href="https://wordpress.youran.me/deskmini-310-hackintosh/">Deskmini 310 + 9900 ES 组建黑苹果</a> </li> <li> <a href="https://wordpress.youran.me/soft-router-3205u/">鸟枪换炮之软路由</a> </li> <li> <a href="https://wordpress.youran.me/kimsufi-ks1/">又剁手了个Kimsufi独服</a> </li> <li> <a href="https://wordpress.youran.me/ct-cn2/">给大家普及普及下电信直连、CN2（GIA）、本土运营商</a> </li> <li> <a href="https://wordpress.youran.me/centos-7-install-bbr/">centos 7安装BBR</a> </li> <li> <a href="https://wordpress.youran.me/use-iptables-in-centos-7/">centos 7下使用iptables</a> </li> </ul> </aside><aside id="recent-comments-4" class="column widget footer-widget widget_recent_comments"><h2 class="widget-title widget-title-bottom">Recent Comments</h2><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link">Deng</span> on <a href="https://wordpress.youran.me/python-raw-socket-programming/#comment-2711">初试Python raw socket编程</a></li><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.youran.me/" class="url" rel="ugc">youran</a></span> on <a href="https://wordpress.youran.me/deskmini-310-hackintosh/#comment-2708">Deskmini 310 + 9900 ES 组建黑苹果</a></li><li class="recentcomments"><span class="comment-author-link">Terrance</span> on <a href="https://wordpress.youran.me/deskmini-310-hackintosh/#comment-2707">Deskmini 310 + 9900 ES 组建黑苹果</a></li><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.youran.me/" class="url" rel="ugc">youran</a></span> on <a href="https://wordpress.youran.me/deskmini-310-hackintosh/#comment-2691">Deskmini 310 + 9900 ES 组建黑苹果</a></li><li class="recentcomments"><span class="comment-author-link">Lecion</span> on <a href="https://wordpress.youran.me/deskmini-310-hackintosh/#comment-2690">Deskmini 310 + 9900 ES 组建黑苹果</a></li><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.youran.me/" class="url" rel="ugc">youran</a></span> on <a href="https://wordpress.youran.me/soft-router-3205u/#comment-2679">鸟枪换炮之软路由</a></li><li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.youran.me/" class="url" rel="ugc">youran</a></span> on <a href="https://wordpress.youran.me/soft-router-3205u/#comment-2678">鸟枪换炮之软路由</a></li></ul></aside><aside id="linkcat-2" class="column widget footer-widget widget_links"><h2 class="widget-title widget-title-bottom">Links</h2> <ul class='xoxo blogroll'> <li><a href="http://argcv.com/" rel="noopener" title="enjoy code,enjoy life" target="_blank">argc && argv</a></li> <li><a href="https://zxljack.com/" rel="noopener" title="JackZhang Blog" target="_blank">张歆琳</a></li> </ul> </aside> </div> </div><!-- .footer-widget-areas --> <div id="copyright" class="row"> <div class="columns"> © 2024 <a href="https://wordpress.youran.me/" title="悠然居 - 极客技术博客"> 悠然居 </a> </div> </div><!-- #copyright --> <!-- Start Of Script Generated By Greg's Comment Length Limiter Plugin 1.6.5 --> <script type="text/javascript"> <!-- function gcllCounter(textarea) { if (textarea.value.length > 500) textarea.value = textarea.value.substring(0, 500); else document.getElementById('commentlen').value = 500 - textarea.value.length; } //--> </script> <!-- End of Script Generated By Greg's Comment Length Limiter Plugin 1.6.5 --><div class="rb row text-center">WordPress Theme by <a href="https://RichWP.com/" >RichWP</a></div></footer><script type="text/javascript"><!--//--><![CDATA[//><!-- var cf = document.getElementById("commentform"); if(cf){ var msghtml = "<strong>NOTICE:</strong> You should type some Chinese word (like “你好”) in your comment and not exceed 500 bytes to pass the spam-check, thanks for your patience!"; if(cf.insertAdjacentHTML){ cf.insertAdjacentHTML("afterEnd", msghtml); }else{/* FireFox */ var range = cf.ownerDocument.createRange(); range.setStartAfter(cf); var frag = range.createContextualFragment(msghtml); cf.parentNode.insertBefore(frag, cf.nextSibling); } } //--><!]]></script><script type="text/javascript" src="https://wordpress.youran.me/wp-content/themes/minimum-minimal/assets/js/app.js?ver=1.0" id="minimumminimal-main-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/themes/minimum-minimal/foundation.js?ver=1" id="minimumminimal-foundation-init-js-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-includes/js/comment-reply.min.js?ver=6.4.5" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script defer type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1710068143" id="akismet-frontend-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/client/js/prod/lib.core.js?ver=2.9.3" id="slb_core-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/client/js/prod/lib.view.js?ver=2.9.3" id="slb_view-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/themes/baseline/js/prod/client.js?ver=2.9.3" id="slb-asset-slb_baseline-base-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/themes/default/js/prod/client.js?ver=2.9.3" id="slb-asset-slb_default-base-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/template-tags/item/js/prod/tag.item.js?ver=2.9.3" id="slb-asset-item-base-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/template-tags/ui/js/prod/tag.ui.js?ver=2.9.3" id="slb-asset-ui-base-js"></script> <script type="text/javascript" src="https://wordpress.youran.me/wp-content/plugins/simple-lightbox/content-handlers/image/js/prod/handler.image.js?ver=2.9.3" id="slb-asset-image-base-js"></script> <script type="text/javascript" id="slb_footer">/* <![CDATA[ */if ( !!window.jQuery ) {(function($){$(document).ready(function(){if ( !!window.SLB && SLB.has_child('View.init') ) { SLB.View.init({"ui_autofit":true,"ui_animate":true,"slideshow_autostart":false,"slideshow_duration":"6","group_loop":true,"ui_overlay_opacity":"0.8","ui_title_default":false,"theme_default":"slb_default","ui_labels":{"loading":"Loading","close":"Close","nav_next":"Next","nav_prev":"Previous","slideshow_start":"Start slideshow","slideshow_stop":"Stop slideshow","group_status":"Item %current% of %total%"}}); } if ( !!window.SLB && SLB.has_child('View.assets') ) { {$.extend(SLB.View.assets, {"882784199":{"id":null,"type":"image","internal":true,"source":"http:\/\/wordpress.youran.me\/wp-content\/uploads\/2013\/12\/168-bytes-editor-ex.png"}});} } /* THM */ if ( !!window.SLB && SLB.has_child('View.extend_theme') ) { SLB.View.extend_theme('slb_baseline',{"name":"Baseline","parent":"","styles":[{"handle":"base","uri":"https:\/\/wordpress.youran.me\/wp-content\/plugins\/simple-lightbox\/themes\/baseline\/css\/style.css","deps":[]}],"layout_raw":"<div class=\"slb_container\"><div class=\"slb_content\">{{item.content}}<div class=\"slb_nav\"><span class=\"slb_prev\">{{ui.nav_prev}}<\/span><span class=\"slb_next\">{{ui.nav_next}}<\/span><\/div><div class=\"slb_controls\"><span class=\"slb_close\">{{ui.close}}<\/span><span class=\"slb_slideshow\">{{ui.slideshow_control}}<\/span><\/div><div class=\"slb_loading\">{{ui.loading}}<\/div><\/div><div class=\"slb_details\"><div class=\"inner\"><div class=\"slb_data\"><div class=\"slb_data_content\"><span class=\"slb_data_title\">{{item.title}}<\/span><span class=\"slb_group_status\">{{ui.group_status}}<\/span><div class=\"slb_data_desc\">{{item.description}}<\/div><\/div><\/div><div class=\"slb_nav\"><span class=\"slb_prev\">{{ui.nav_prev}}<\/span><span class=\"slb_next\">{{ui.nav_next}}<\/span><\/div><\/div><\/div><\/div>"}); }if ( !!window.SLB && SLB.has_child('View.extend_theme') ) { SLB.View.extend_theme('slb_default',{"name":"Default (Light)","parent":"slb_baseline","styles":[{"handle":"base","uri":"https:\/\/wordpress.youran.me\/wp-content\/plugins\/simple-lightbox\/themes\/default\/css\/style.css","deps":[]}]}); }})})(jQuery);}/* ]]> */</script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) {(function($){$(document).ready(function(){if ( !!window.SLB ) { {$.extend(SLB, {"context":["public","user_guest"]});} }})})(jQuery);}/* ]]> */</script> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Object Caching 86/115 objects using Disk Page Caching using Disk: Enhanced Database Caching 6/11 queries in 0.017 seconds using Disk Served from: wordpress.youran.me @ 2024-12-04 00:43:15 by W3 Total Cache -->