notepad in browser

rcjordan · January 29, 2013, 07:05:14 PM

https://coderwall.com/p/lhsrcq

Handy.

Drastic · January 29, 2013, 09:51:40 PM

Yeah, pretty neat, will be handy.

IrishWonder · January 29, 2013, 09:54:06 PM

Nice indeed and works on the iPad too

bill · January 30, 2013, 07:08:52 AM

So you just type:

Code Select

data:text/html, <html contenteditable>

into your browser and away you go?

Rooftop · January 30, 2013, 09:36:10 AM

Useful. I like that.

Adam C · January 30, 2013, 09:40:27 AM

handy, bookmark added to toolbar

IrishWonder · 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

JasonD · January 30, 2013, 09:45:59 AM

top tip of the week, thank you

rcjordan · 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.

IrishWonder · 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]

bill · February 01, 2013, 06:21:38 AM

It's getting pretty

This one looks like a real notepad.

Code Select

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>

rcjordan · 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.

Drastic · 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?

littleman · February 01, 2013, 06:22:35 PM

Nice job Bill, now all we need is a clear and save button. RC?

rcjordan · 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.

Code Select

<!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>