rickdog
9/11/2016 - 9:08 AM
Put a NiceEdit wysiwyg editor at the bottom of a webpage, a bookmarklet that makes collecting web snippets super easy, while preserving form
Put a NiceEdit wysiwyg editor at the bottom of a webpage, a bookmarklet that makes collecting web snippets super easy, while preserving formatting.
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;
}
};// 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://raw.githubusercontent.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();
}// 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://gist.github.com/rickdog/718208ab5055372c307b93989a9d8348/raw/73402e27b7cf9a760add543b4e275bbcb75db69c/niceEdit.js', function () {
jQuery('#niceEditLoader').remove();
}, true, 'niceEditLoader');
// 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);
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>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).