Unhappy with the loss of formatting when you copy and paste snippits from a web page for saving or printing? That's because you separate the stylesheets from the web content that you grabbed. The solution is to have a WYSIWYG editor living in the webpage that you're grabbing snippits from. This handy bookmarklet plops an editor at the webpage's bottom that you can transfer snippets to. When you're done click the print button and a new window will open with your collected content along with the page's stylesheets. Cancel the print dialog if you like and just save the page (Ctl-s).
Last active
March 23, 2021 15:31
-
-
Save rickdog/718208ab5055372c307b93989a9d8348 to your computer and use it in GitHub Desktop.
Put a NiceEdit wysiwyg editor at the bottom of a webpage, a bookmarklet that makes collecting web snippets super easy, while preserving formatting.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Drag this bookmarklet to your browser bookmark bar: | |
| <b><a href="javascript:function%20loadJS(url,%20callback,%20bLoadJqueryFirst,%20id)%20{%20if%20(bLoadJqueryFirst%20&&%20(typeof%20jQuery%20==%20'undefined'))%20{%20loadJS('https://code.jquery.com/jquery.js',%20function%20()%20{%20},%20false,%20null);%20}%20var%20s%20=%20document.createElement('script');%20s.src%20=%20url;%20if%20(id)%20s.id%20=%20id;%20if%20(s.addEventListener)%20{%20s.addEventListener('load',%20callback,%20false);%20}%20else%20{%20s.onreadystatechange%20=%20function%20()%20{%20if%20(this.readyState%20==%20'complete')%20{%20callback();%20jQuery(s).remove();%20}%20}%20}%20s.type%20=%20'text/javascript';%20document.getElementsByTagName('head')%20[0].appendChild(s);%20};%20loadJS('https://gist.github.com/rickdog/718208ab5055372c307b93989a9d8348/raw/73402e27b7cf9a760add543b4e275bbcb75db69c/niceEdit.js',%20function%20()%20{%20jQuery('#niceEditLoader').remove();%20},%20true,%20'niceEditLoader');">niceEdit</a></b> | |
| <br><br> | |
| You can see the raw code in this <a href='https://gist.github.com/rickdog/718208ab5055372c307b93989a9d8348'>Gist</a> | |
| niceEdit > colorpicker > loader > bookmarklet | |
| https://cdn.rawgit.com/rickdog/718208ab5055372c307b93989a9d8348/raw/ecb0be8dc24d8241555a0d160263c29091c9039b/loader.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // create a new window with a color picker | |
| // and query the color chosen every 1/2 second | |
| // works in concert with niceedit bookmarklet | |
| var h = `<!doctype html><html><head> <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script type="text/javascript" src="https://acko.net/files/farbtastic/demo/farbtastic.js" sync></script> <link rel="stylesheet" href="https://acko.net/files/farbtastic/demo/farbtastic.css" type="text/css" /> </head><body><form><input type="text" id="color" name="color" value="#123456" /></form> <div id="colorpicker"></div><script>jQuery('#colorpicker').farbtastic('#color');</script></body><\/html>`; | |
| var win = window.open("", "_blank", "width=200,height=200,left=200,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); | |
| win.document.open(); | |
| win.document.write(h); | |
| var rgb = null; | |
| var iPicker = setInterval(function() { | |
| if (!win.closed) { | |
| clearInterval(iPicker); | |
| iPicker = setInterval(function() { | |
| try { | |
| rgb = win.document.documentElement.querySelector("#color").value; | |
| } catch (e) {}; | |
| console.log(rgb); | |
| if (win.closed) { | |
| clearInterval(iPicker); | |
| var bg = document.querySelector("#cpBG"); | |
| var html = bg ? bg.innerHTML : jQuery('#myInstance1').html(); | |
| jQuery('#myInstance1').html("<div id='cpBG' style='background-color:" + rgb + "'>" + html + "</div>"); | |
| console.log("DONE"); | |
| } | |
| }, 500); | |
| } | |
| }, 500); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // load niceEdit.js | |
| function loadJS(url, callback, bLoadJqueryFirst, id) { | |
| if (bLoadJqueryFirst && (typeof jQuery == 'undefined')) { | |
| loadJS('https://code.jquery.com/jquery.js', function () { | |
| }, false, null); | |
| } | |
| var s = document.createElement('script'); | |
| s.src = url; | |
| if (id) | |
| s.id = id; | |
| if (s.addEventListener) { | |
| s.addEventListener('load', callback, false); | |
| } else { | |
| s.onreadystatechange = function () { | |
| if (this.readyState == 'complete') { | |
| callback(); | |
| jQuery(s).remove(); | |
| } | |
| } | |
| } | |
| s.type = 'text/javascript'; | |
| document.getElementsByTagName('head') [0].appendChild(s); | |
| } | |
| loadJS('https://cdn.rawgit.com/rickdog/718208ab5055372c307b93989a9d8348/raw/cea55115c6de39a9b14e1e8a1f03ed4e6d95aa22/niceEdit.js', function () { | |
| jQuery('#niceEditLoader').remove(); | |
| }, true, 'niceEditLoader'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // load Nicedit core | |
| javascript:function loadJS(url, callback, bLoadJqueryFirst) | |
| { | |
| if (bLoadJqueryFirst && (typeof jQuery == 'undefined')) { | |
| loadJS("https://code.jquery.com/jquery.js", function(){}, false); | |
| } | |
| var s = document.createElement('script'); | |
| s.src = url; | |
| if (s.addEventListener) { | |
| s.addEventListener('load', callback, false); | |
| } else { | |
| s.onreadystatechange = function () { | |
| if (this.readyState == 'complete') { | |
| callback(); | |
| s = null; | |
| } | |
| } | |
| } | |
| s.type = 'text/javascript'; | |
| document.getElementsByTagName('head')[0].appendChild(s); | |
| }; | |
| function htmlEncode(value) { | |
| return jQuery('<div/>').text(value).html(); | |
| } | |
| function htmlDecode(value) { | |
| return jQuery('<div/>').html(value).text(); | |
| } | |
| // add panel and editor body divs | |
| var s = ` | |
| <div id="myNicPanel"/> | |
| <div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; border: 5px solid #000; min-height:400px"> | |
| </div>`; | |
| // add a print button | |
| var prnt = ` | |
| <div style="float: left; margin-top: 2px;"> | |
| <div class="nicEdit-buttonContain nicEdit-buttonEnabled" style="width: 20px; height: 20px; opacity: 1;"> | |
| <div class="nicEdit-button-undefined nicEdit-button-hover" style="background-color: rgb(239, 239, 239); border: 1px solid rgb(239, 239, 239);"> | |
| <div onclick="printDoc()" unselectable="on" class="nicEdit-button" style="width: 18px; height: 18px; overflow: hidden; cursor: pointer; background-image: url("https://raw.githubusercontent.com/rickdog/niceedit/master/printer-color.png");"> | |
| </div> | |
| </div> | |
| </div> | |
| </div>`; | |
| var myNicEditor; | |
| // load core and add chrome | |
| loadJS("https://cdn.rawgit.com/rickdog/niceedit/master/nicEdit-latest.js", function() | |
| { | |
| jQuery("body").append(s); | |
| myNicEditor = new nicEditor({fullPanel : true}); | |
| myNicEditor.setPanel('myNicPanel'); | |
| myNicEditor.addInstance('myInstance1'); | |
| jQuery(".nicEdit-panel").append(prnt); | |
| jQuery("#myInstance1")[0].scrollIntoView(); | |
| }, true); | |
| function printDoc() { | |
| var oPrntWin = window.open("","_blank","width=850,height=670,left=200,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); | |
| oPrntWin.document.open(); | |
| oPrntWin.document.write("<!doctype html><html><head><title>Snippit<\/title>" + document.head.innerHTML + "<\/head><body>" + jQuery("#myInstance1").html() + "<\/body><\/html>"); | |
| oPrntWin.document.close(); | |
| } | |
| function showCode() | |
| { | |
| var options = { | |
| "indent":"auto", | |
| "indent-spaces":4, | |
| "wrap":9999, | |
| "markup":true, | |
| "output-xml":false, | |
| "numeric-entities":true, | |
| "quote-marks":true, | |
| "quote-nbsp":false, | |
| "show-body-only":true, | |
| "quote-ampersand":false, | |
| "break-before-br":true, | |
| "uppercase-tags":false, | |
| "uppercase-attributes":false, | |
| "drop-font-tags":true, | |
| "tidy-mark":false | |
| }; | |
| var html = jQuery("#myInstance1").html(); | |
| var htmlTidy = tidy_html5(html, options); | |
| var htmlEnc = htmlEncode(htmlTidy); | |
| var W = window.open("","_blank","width=850,height=670,left=200,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); | |
| W.document.open(); | |
| W.document.write(htmlEnc.replace(/[ ]/g, ' ').replace(/[\t]/g, ' ').replace(/[\n\r]/g, '<br>')); | |
| W.document.close(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var isCtrl = false; | |
| document.onkeyup=function(e){ | |
| if(e.keyCode == 17) isCtrl=false; | |
| }; | |
| document.onkeydown=function(e){ | |
| if(e.keyCode == 17) isCtrl=true; | |
| if(e.keyCode == 83 && isCtrl == true) { | |
| e.stopPropagation(); | |
| printDoc(); | |
| return false; | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
should probably remove the script block for niceEdit.js too because the header gets copied into the print window.