The Core

Why We Are Here => Water Cooler => Topic started by: rcjordan on January 29, 2013, 07:05:14 PM

Title: notepad in browser
Post by: rcjordan on January 29, 2013, 07:05:14 PM
https://coderwall.com/p/lhsrcq

Handy.
Title: Re: notepad in browser
Post by: Drastic on January 29, 2013, 09:51:40 PM
Yeah, pretty neat, will be handy.
Title: Re: notepad in browser
Post by: IrishWonder on January 29, 2013, 09:54:06 PM
Nice indeed and works on the iPad too
Title: Re: notepad in browser
Post by: bill on January 30, 2013, 07:08:52 AM
So you just type:

data:text/html, <html contenteditable>

into your browser and away you go?
Title: Re: notepad in browser
Post by: Rooftop on January 30, 2013, 09:36:10 AM
Useful. I like that.
Title: Re: notepad in browser
Post by: Adam C on January 30, 2013, 09:40:27 AM
handy, bookmark added to toolbar
Title: Re: notepad in browser
Post by: IrishWonder on January 30, 2013, 09:41:52 AM
Bill - yes, or further in the comments there are some variations of what can be done to enhance it further, and you can then save it as a bookmark
Title: Re: notepad in browser
Post by: JasonD on January 30, 2013, 09:45:59 AM
top tip of the week, thank you
Title: Re: notepad in browser
Post by: rcjordan on January 30, 2013, 12:09:13 PM
I used the original version 3 or 4 times yesterday.  Spellcheck was a bonus in this instance.

>comments

Give them another day or two and this thing will be "UltraEdit Lite"

Irish, did you try that localstorage addon?

Give me localstorage and find & replace and I'm good to go.
Title: Re: notepad in browser
Post by: IrishWonder on January 30, 2013, 01:34:53 PM
No I didn't get into anything too complicated yet and just used
Quotedata:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">/quote]
Title: Re: notepad in browser
Post by: bill on February 01, 2013, 06:21:38 AM
It's getting pretty

This one looks like a real notepad.

data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>
Title: Re: notepad in browser
Post by: rcjordan on February 01, 2013, 11:48:44 AM
I did the local html version to get localstorage  on chrome. Love it. Used it a bunch yesterday to strip formatting.  Needs find & replace js and it'd be perfect.
Title: Re: notepad in browser
Post by: Drastic on February 01, 2013, 03:10:23 PM
Quote from: bill on February 01, 2013, 06:21:38 AM
It's getting pretty

This one looks like a real notepad.


No worky for me?
Title: Re: notepad in browser
Post by: littleman on February 01, 2013, 06:22:35 PM
Nice job Bill, now all we need is a clear and save button.  RC?
Title: Re: notepad in browser
Post by: rcjordan on February 01, 2013, 06:46:14 PM
Save already works on my local file version. Just hit return.  CNTL+F works for find but I'd like to add replace.
CNTL+SHIFT+V works for unformatted paste and my code keeps spellcheck on for both formatted & unformatted text.

<!DOCTYPE html><head><meta charset="utf-8"><title>TextEditorLocal</title><script>window.onload=function(){f1()};
function f1(){a=window.localStorage['e'];if(a) document.body.innerHTML=a};function f2(t,e){if(e.keyCode==13){window.localStorage['e']=t.innerHTML}}</script>
<body contenteditable spellcheck="true" style="font-size:1.2rem;line-height:1.2;max-width:60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:white;color:black;" onkeypress="f2(this,event);"></body></html>


Title: Re: notepad in browser
Post by: bill on February 04, 2013, 05:06:23 AM
Quote from: Drastic on February 01, 2013, 03:10:23 PM
Quote from: bill on February 01, 2013, 06:21:38 AM
It's getting pretty

This one looks like a real notepad.


No worky for me?

Worked great in Chrome, but it gets wonky in my other browsers. NoScript kills it in FireFox, Opera shows a blank page, and IE10 barfs. It may be safer and more functional to go with RC's HTML version.