Skip to content

Instantly share code, notes, and snippets.

@rickdog

rickdog/README.md

Last active March 23, 2021 15:31
Show Gist options
  • Save rickdog/718208ab5055372c307b93989a9d8348 to your computer and use it in GitHub Desktop.
Save rickdog/718208ab5055372c307b93989a9d8348 to your computer and use it in GitHub Desktop.
Download ZIP
Put a NiceEdit wysiwyg editor at the bottom of a webpage, a bookmarklet that makes collecting web snippets super easy, while preserving formatting.
Raw
README.md

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).

Go get the bookmarklet!

Raw
bookmarklet.html
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
Raw
colorpicker.js
// 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);
Raw
loader.js
// 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');
Raw
niceEdit.js
// 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(&quot;https://raw.githubusercontent.com/rickdog/niceedit/master/printer-color.png&quot;);">
</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, '&nbsp;').replace(/[\t]/g, '&nbsp;&nbsp;&nbsp;&nbsp;').replace(/[\n\r]/g, '<br>'));
W.document.close();
}
Raw
save.js
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;
}
};
@rickdog
Copy link
Author

rickdog commented Sep 12, 2016

should probably remove the script block for niceEdit.js too because the header gets copied into the print window.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment